javascript - React 中表单元素的委托(delegate)

Question

我正在尝试学习 React 。我有很好的 JS 知识，但知道我无法处理 React 中的简单情况。我已经在表单元素上放置了一个事件，该元素有 2 个子元素，并且我正在尝试执行某些操作(在本例中这并不重要)，因此我编写了一个带有其事件对象的处理程序。我实际上知道触发事件的最深元素称为“目标”或“源”元素，并且可作为 event.target 使用。在我的例子中， event.target 不是一个已提交的 button 元素 ，而是一个带有事件的 form 元素。所以我无法理解这种情况。

这是我的代码`

    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 或者更实用的方式