Реагировать на создание формы редактирования

Question

Я только начал работать с React, застрял на форме редактирования. Мне нужно предварительно заполнить входные данные, но и иметь возможность редактировать его. Если я поставлю defaultValue, я не смогу выставить значение для элемента ввода. В этот момент я могу ввести данные, но мне нужно отредактировать оба поля (форма имеет два поля), чтобы сохранить оба значения. Как мне это сделать?

Пример: У меня есть название рецепта и ингредиенты, я открываю модальную форму для редактирования, она заполнена заранее, я добавляю некоторые ингредиенты, но оставляю название без изменений. Это экономит:

{name: "", ingredients: ing1,ing2,newIngredient}

<form role="form">
             <div className="form-group">
                  <label htmlFor={props.recipeName}>Recipe</label>
                 <input 
                    type="text" 
                    className="form-control"
                    defaultValue={props.recipeName || ''}
                    name="recipeName"
                    placeholder="Recipe name"
                    onChange={props.handleChange.bind(this)}/>
            </div>
          <div className="form-group">
                  <label htmlFor={props.recipeIngredients}>Ingredients</label>
                  <textarea 
                    type="text" 
                    className="form-control"
                    defaultValue={props.recipeIngredients || ''}
                    placeholder="Enter ingredients separated by commas..."
                    onChange={props.handleChange.bind(this)}
                    name="recipeIngredients"></textarea>
           </div>
  </form>

Answer 1

Сохраните значения в состоянии. Сначала добавьте их в метод componentDidMount, чтобы они были у вас при загрузке компонента формы:

ComponentDidMount() {
   const { recipeName  } = this.props;
   this.setState({ recipeName });
}

Затем onChange каждого <input> обновляет состояние. Таким образом, вы сохраняете состояние компонента любым способом, которым вы сейчас сохраняете свои значения:

updateInputValue(e) {
   const { target: {value} } = e;
   this.setState({ recipeName: value });
}

<input 
                    type="text" 
                    className="form-control"
                    value={this.state.recipeName}
                    name="recipeName"
                    placeholder="Recipe name"
                    onChange={this.updateInputValue}/>

Когда вы доберетесь до redux, я рекомендую использовать Redux Form

Answer 2

Вам нужно будет перевести значения переданных реквизитов в исходное состояние. Вам нужно сделать это в вашем конструкторе.

В настоящее время ваше состояние обновляется только через события изменения, но начальное состояние никогда не устанавливается (ну, вероятно, в любом случае. Я только догадываюсь об этом, потому что вы не включили свой полный код).