使用 onSubmit 为多个输入设置状态?

Question

我想从表单中的这两个输入中获取数据，并将一个设置为 state.name，另一个设置为state.option。有没有办法在使用表单提交按钮而不是使用单独的onChange处理程序来设置每个状态时设置它们？如果没有，有一个没有真正做任何事情的提交按钮感觉很尴尬。

onTextChange(name) {
this.setState({ name });
console.log(this.state.name);
}
onOptionChange(option) {
this.setState({ realm });
console.log(this.state.option);
}
onSubmitForm(event) {
event.preventDefault();
}
render() {
return (
<div>
<h3>Enter Name:</h3>
<form onSubmit={event => this.onSubmitForm(event.target.value)}>
<input 
type="text" 
placeholder="Name"
value={this.state.name}
onChange={event => this.onTextChange(event.target.value)}
/>
Select Option:
<select onChange = {event => this.onOptionChange(event.target.value)}>
<option value="1">Option 1</option>
<option value="2">Option 2</option>
</select>
<input type="submit" />
</form>

Answer 1

在 React 中，你必须控制状态和setState中表单/输入中发生的事情，并更改它。这就是所谓的单一事实来源

欢迎来到 React :)