Через props - не катит, иначе будет readonly

Что? Если хочешь пропсы — передаёшь с содержимым коллбэк вроде onChange, например.

Я спрашиваю именно про начальные значения. То есть у меня статья, допустим, называется «посиделки на linux.org». По идее, если я хочу её редактировать, то у меня в форме редактирования в input, соответствующем заголовку этой статьи, должно быть написано «посиделки на linux.org». Если я сделаю вот так: value={this.props.title}, то я не смогу менять содержимое этого input, разве нет?

В props передаёшь начальные значения, ими инициализируешь state в конструкторе. В render используешь state и вешаешь onchange, в котором обновляешь state.

А вообще если будешь часто работать с формами, советую заюзать одну из специализированных библиотек для этого дела. Руками каждый раз всё писать скучно.

1) Это всё будет идеально работать до тех пор, пока я после редактирования одной статьи не захочу отредактировать следующую. Потому что компонента формы редактирования уже будет создана и так при редактировании первой статьи. Когда я попытаюсь редактировать вторую, конструктор вызван уже не будет, поэтому я в форме редактирования увижу данные предыдущей статьи.

2) Какую библиотеку порекомендуете?

Если я сделаю вот так: value={this.props.title}, то я не смогу менять содержимое этого input, разве нет?

Конечно, сможешь, но только родителем, который этот props.title передаёт. Для родителя title может быть внутри стейта и он может управлять формой как угодно, в том числе и менять её, убирать, возвращать с любым другим текстом.

Понял, это меняет дело. Спасибо!

Грубо говоря,

const { currentArticle, isEditing } = this.state;
return (
  isEditing
    ? <FormComponent value=currentArticle onChange=(currentArticle) => this.setState({ currentArticle }) />
    : <div>
        <button onClick={() => this.setState({ isEditing: true })>Edit</button>
        <DisplayComponent>{currentArticle}</DisplayComponent> и дальше что угодно (другие статьи или что там)
     </div>
);

Добавить <Route> по вкусу (роутер спокойно заменит isEditing).

1) Это всё будет идеально работать до тех пор, пока я после редактирования одной статьи не захочу отредактировать следующую. Потому что компонента формы редактирования уже будет создана и так при редактировании первой статьи. Когда я попытаюсь редактировать вторую, конструктор вызван уже не будет, поэтому я в форме редактирования увижу данные предыдущей статьи.

Ну тут сложно что-то говорить не видя, как ты компонент формы используешь и вообще как оно устроено. Если форма из дерева исчезает, то в следующий раз конструктор будет вызван, когда она там появится (т.е. при стандартном для веба использовании вида редактировать - новая форма - сохранить/отменить - форма исчезла). Если у тебя форма из дерева не исчезает, тогда можешь перегрузить метод componentWillReceiveProps() и там обновить state, например.

Попробуй вместо React использовать Vue.

Я использую componentDidMount для получения даных.

componentDidMount() {
    // ajax
}

из props перекинь в state, а после редактирования - отправляй на сервер ajax-ом

UPD. а вообще, здесь какой-нибудь flux подойдет

Ответ самому себе, спустя год

Всем привет! В общем, спустя год, освоил я-таки реакт в полной мере. В полной мере для того, чтобы достаточно спокойно на нем разрабатывать более-менее сложные интерфейсы. Ответ самому себе: пилить самостоятельно обработку форм - это костыли и велосипеды. Также не стоит данные полей формы по onChange гнать через redux - это сильно усложнит проект, да и вряд ли будет красивым решением.

Гораздо удобнее для этих целей (для работы с формами) взять готовую библиотеку типа react-final-form - и сэкономить таким образом уйму времени, сил, а код проекта сделать приятным и красивым. Там, например, есть свойство initialValues, позволяющее передать в форму значения прямо из пропсов, и все нормально будет изменяться, потому что эта логика (проброс из пропс в стейт) уже реализован внутри этой библиотеки. К слову, в github-репозитории react-final-form есть куча примеров на все случаи жизни.

То есть использование react-final-form или formik сразу решает кучу проблем, позволяя сосредоточиться на более важной логике проекта. Советую начинающим разработчикам в React использовать для обработки форма именно готовое решение, чтобы, столкнувшись с трудностями работы с формами, не потерять интерес к фронтент-разработке.