React:form

Posted 2020-10-05 瓶子2333

表单控件：

input

  文档在介绍控件之前，先提到了react组件自身的一个特点：状态由state掌控，改变组件状态只能用setState方法。

而在html的表单里，input、radio、checkbox、select的值都是随用户输入改变的。

要创建一个React的表单控件，也就是用React的方式创建表单组件：

<label>
Name:
<input type="text" value={this.state.value} onChange={this.handleChange} />
</label>

在input控件中，value值就是一个状态state.value。当用户输入完成后，通过onChange事件调用setState改变state.value的值，从而让state.value与用户输入一致。此时，input不再是一个单纯的表单元素，而是一个React组件，可以有各种用户自定义行为。这和vue的v-model倒是很一致。一个组件就是一个实例，状态变量属于实例的（私有）属性，并能单向/双向绑定。

textarea：

在html中，textarea的初始值由其文本元素定义。

在React中，用其value特性来表示。具体操作和input一样：

  <textarea value={this.state.value} onChange={this.handleChange} />

select:

1 <select>
2   <option value="grapefruit">Grapefruit</option>
3   <option value="lime">Lime</option>
4   <option selected value="coconut">Coconut</option>
5   <option value="mango">Mango</option>
6 </select>

在html中，select创建下拉菜单，在option中庸selected特性预选一个option。

在React中，不适用selected特性，而是直接用value预定义某个选项的值。这使得对select的操作专注在value特性。

 1   //...
 2   constructor(props) {
 3     super(props);
 4     this.state = {value: ‘coconut‘};
 5 
 6     this.handleChange = this.handleChange.bind(this);
 7     this.handleSubmit = this.handleSubmit.bind(this);
 8   }
 9 //...
10   <select value={this.state.value} onChange={this.handleChange}>
11             <option value="grapefruit">Grapefruit</option>
12             <option value="lime">Lime</option>
13             <option value="coconut">Coconut</option>
14             <option value="mango">Mango</option>
15    </select>

因此，对于input、textarea和select，我们只需要操作value即可。

处理Multiple Inputs：

文档给了一个针对多个表单控件的例程，我们可以通过判断控件的的name和type特性来处理：

1   handleInputChange(event) {
2     const target = event.target;
3     const value = target.type === ‘checkbox‘ ? target.checked : target.value;
4     const name = target.name;
5 
6     this.setState({
7       [name]: value
8     });
9   }

此时，表单的状态就是表单的名值对，经过URI编码后可以post给后台。

 

另一种替代方案：

　　文档提到，如果我们嫌表单控件麻烦，可以用另一种形式的表单组件--Uncontrolled Components：

意思是我们不必特意给form中的表单元素写处理程序，也不需要创建state变量。我们只需要写一个针对整个表单的处理程序，在用户submit的时候调用即可。其中，表单元素的value的输入用一个ref函数捕获：

 1   render() {
 2     return (
 3       <form onSubmit={this.handleSubmit}>
 4         <label>
 5           Name:
 6           <input type="text" ref={(input) => this.input = input} />
 7         </label>
 8         <input type="submit" value="Submit" />
 9       </form>
10     );

另外，Uncontrolled Components形式的表单中，为了给表单元素设置初始值，有一个defaultValue特性，在表单渲染的时候显示初始值。

1         <input
2           defaultValue="Bob"
3           type="text"
4           ref={(input) => this.input = input} />