如何在React中同时获得两个输入字段的值

Question

这是表单，我想在用户提交表单时获得姓名和年龄的值。

<form>
<input type='text' name='name'></input>
<input type='number' name='age'></input>
<input type='submit' />
</form>

Answer 1

受控组件(反应方式(

您必须将这两个值都存储在状态中。然后在表单的onSubmit中使用它们。

请参阅https://reactjs.org/docs/forms.html

/* component init */
constructor(props) {
super(props);
this.state = {
value1: '',
value2: ''
}
}
/* handle changes */
onChange1(event) {
this.setState({ value1: event.target.value });
}
onChange2(event) {
this.setState({ value2: event.target.value });
}
/* submit method */
onSubmit(event) { 
event.preventDefault(); 
const value1 = this.state.value1;
const value2 = this.state.value2;
console.log(value1, value2);
}
/* render */
<form onSubmit={this.onSubmit}> 
<input type="text" value={this.state.value1} onChange={this.onChange1} /> 
<input type="number" value={this.state.value2} onChange={this.onChange2} /> 
<input type="submit" value="Submit" />
</form>

不受控制的组件(非React方式(

如果你想使用不受控制的组件(不要自己存储值(，你必须使用refs。

关于裁判的更多信息https://reactjs.org/docs/refs-and-the-dom.html.

/* component init */
constructor(props) {
super(props);
this.input1 = React.createRef(); 
this.input2 = React.createRef(); 
}
/* submit method */
handleSubmit(event) { 
event.preventDefault(); 
const value1 = this.input1.current.value;
const value2 = this.input2.current.value;
console.log(value1, value2);
}
/* render */
<form onSubmit={this.handleSubmit}> 
<input type="text" ref={this.input1} /> 
<input type="number" ref={this.input2} /> 
<input type="submit" value="Submit" />
</form>