Javascript React中表单元素的委托

我正在努力学习如何反应。我有一个很好的JS知识，但我知道我不能处理一个简单的情况下反应。我在表单元素上放置了一个事件，它有两个子元素，我试图做一些在本例中无关紧要的事情，所以我用它的事件对象编写了一个处理程序。我实际上知道触发事件的最深元素称为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应该是button元素，而不是form元素

您可以尝试以下操作：

设置初始状态{optionInput:}

在输入中添加一个处理程序onChange，并将值存储在state中

在FormSubmit上需要时从state获取值

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>
);

---

也许你们必须用这个关键字重构这些东西。因为我看不出您是否使用类组件或更具功能的方式

如果您上面的示例代码都在渲染函数中，那么您应该在渲染函数之外设置FormSubmit和handleChange否，我只是想了解为什么event.target是表单元素而不是按钮元素，因为事件触发button元素。因为onSubmit函数位于组件上，表单元素触发submit事件。同样在无反应代码中。见：