在 React 中对表单元素进行委派

Question

我正在尝试学习 React 。我有很好的JS知识，但知道我无法在React中处理一个简单的情况。我在表单元素上放了一个事件，它有 2 个子元素，我正在尝试做一些事情(在这种情况下没关系(，所以我用它的事件对象编写了一个处理程序。我实际上知道触发事件的最深层元素称为"目标"或"源"元素，可用作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. 在更改输入时添加处理程序并将值存储在状态中

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关键字重构这些东西。 因为我看不到您使用的是类组件还是更实用的方式