Делегирование элемента формы в React

Question

Я пытаюсь выучить React.Я хорошо знаю JS, но знаю, что не могу справиться с простой ситуацией в React.Я поместил событие в элемент формы, который имеет 2 дочерних элемента, и я пытаюсь что-то сделать (в данном случае это не имеет значения), поэтому я написал обработчик с его объектом события.Я действительно знаю, что самый глубокий элемент, который запускает событие, называется элементом «target» или «source» и доступен как event.target .В моем случае event.target - это не элемент кнопки , который отправляется, а элемент формы, в котором есть событие.Так что я не могу понять эту ситуацию.

Вот мой код `

    const onFormSubmit = (event) => {
    event.preventDefault();

    const option = event.target.elements.option.value;
}

    let template = (
        <div>
            <form onSubmit={onFormSubmit}>
                <input typa='text' name='option'/>
                <button>Add Option</button>
            </form>
        </div>
    );

Предполагается, что event.target будет элементом кнопки, но вместо него это формастихия

Answer 1

Вы можете попробовать следующее:

1. Установить начальное состояние { optionInput: '' }

2. добавить обработчик onChange к вашему входу и сохранитьзначение в состоянии

3. получить значение из состояния, когда оно необходимо (onFormSubmit)

   const onFormSubmit = (event) => {
       event.preventDefault();
       const option = this.state.optionInput;
   }
   
   const handleChange = (event) => {
        const {value} = event.target
        // Now set state - setState() 
        this.setState({ optionInput: value })
   };
   
   let template = (
       <div>
           <form onSubmit={onFormSubmit}>
               <input typa='text' value={this.state.optionInput} name='option' onChange={handleChange}/>
               <button>Add Option</button>
           </form>
       </div>
   );
   

Возможно, вам придется выполнить рефакторингматериал с ключевым словом this.потому что я не вижу, используете ли вы класс Component или более функциональный способ