React：表单

2018-06-19 11:08 更新

在前端开发中，当谈到用户输入时，我们首先想到的是表单，诸如：<input>、<textarea>、<option>等。而在React中，这些表单组件与其他组件有所不同，那就是它们的状态会随着用户交互而变化，所以要管理好这些组件的状态，不是件易事。

在React中，表单组件有两种类型：约束组件和非约束组件。

1、约束组件

设置了 value 的表单组件（<input> ）是一个约束组件。对于约束的表单组件（<input>），渲染出来的 HTML 元素始终保持 value 属性的值，也可以这样理解，当你使用约束组件时，不管你输入什么，页面上看到表单的值都是保持不变的。

var MyForm = React.createClass({
  getInitialState: function(){
     return {value:'Hello'};
  },
  render: function(){
    var value = this.state.value;
    return (<input type="text" value={value} />);
  }
});

上面的代码中，将表单组件的状态（value）交由React组件来控制，将状态值存储在React组件的state属性中。

在约束组件中，既然用户在渲染出来的元素里输入任何值都不起作用，那么我们如何去响应更新用户输入的值呢？

我们要使用onChange事件：

var MyForm = React.createClass({
  getInitialState: function(){
     return {value:'Hello'};
  },
  handleChange: function(event){
    this.setState({value:event.target.value});
  },
  render: function(){
    var value = this.state.value;
    return (<input type="text" value={value} onChange={this.handleChange}/>);
  }
});

在上面的代码中，我们调用onChange事件来监听状态变化，同时使用 event.target.value 来取得表单的值。

所有的 HTML 原生组件都支持 onChange 属性，而且可以用来监听冒泡的 change 事件，同时也提供了 event.target 来访问触发事件的DOM节点。

使用约束组件，我们可以控制数据流，在用户输入数据时更新state。

使用约束组件，我们可以为表单增加很多验证限制！

2、非约束组件

没有设置 value(或者设为 null) 的表单（例如：<input/>）组件是一个非约束组件，此表单组件的值不受React组件控制。

我们可以使用 defaultValue 属性给表单（类型为radio、checkbox的<input>和<select>）组件设置一个非空的初始值。

var MyForm = React.createClass({
  render: function(){
     return (<input type="text" defaultValue="Hello" />);
  }
});

上面的代码展示的就是一个非约束组件。组件的value并非由父组件设置，而是让<input/>自己控制自己的值。

使用非约束组件时，我们可以使用 ref 属性，以访问DOM节点的值：

var MyForm = React.createClass({
  handleChange: function(){
    var value = this.refs.myinput.value;
    console.log(value);
  },
  render: function(){
     return (<input type="text" ref="myinput" onChange={this.handleChange} defaultValue="Hello" />);
  }
});

非约束组件可以用在基本的无须任何验证或者输入控制的表单中。

3、其他

3.1 Label

Label是表单元素中很重要的组件，通过Label可以明确的向用户传达你的要求，提示单选框和复选框的可用性。

在React中，由于for是JavaScript的关键字，所有应该用 htmlFor 替代 for 。

3.2 文本框和select

在HTML中，我们是这样来设置<textarea/>的初始值：

<textarea>初始值</textarea>

但是，在React中，这样的写法是被禁止的，我们应该通过设置value或defaultValue。

//非约束
<textarea defaultValue="Hello" />

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

在React中，<select/>组件并不是采取在<option>中设置selected来设置已选项，而同样是接受value和defaultValue来设置已选项。

//非约束
<select defaultValue="B">
  <option value="A">A</option>
  <option vlaue="B">B</option>
</select>

//约束
<select value={this.state.mySelect} onChange={this.handleChange}>   
  <option value="A">A</option>   
  <option vlaue="B">B</option>  
</select>

如果要设置多选select，可以这样：

//非约束
<select multiple="true" defaultValue={["A","B"]}>
  <option value="A">A</option>
  <option vlaue="B">B</option>
</select>

//约束
<select multiple="true" value={this.state.mySelect} onChange={this.handleChange}>   
  <option value="A">A</option>   
  <option vlaue="B">B</option>  
</select>

注意：当使用可多选的select时，select组件的值在选项被选择时不会更新，只有选项的selected属性会发生变化。我们可以使用ref或者event.target来访问选项，检查它们是否被选中。

3.3 复选框和单选框

通常，复选框和单选框的值是不变的，只有checked状态会变化，所以控制复选框或单选框，实质就是控制它们的checked属性。

//非约束
<input type="radio" defaultChecked="true" />

//约束
<input type="radio" checked={this.state.checked} onChange={this.handleChange} />

在非约束组件中，我们可以使用defaultChecked设置复选框或单选框的初始值，值为布尔值。

3.4 Focus

在React中，我们使用 autoFocus 属性来聚焦：

<input type="text" autoFocus="ture" />

当然，你也可以调用DOMNode的focus()方法来手动设置表单域聚焦。

总结

表单组件有两种类型：约束组件（有value值）和非约束组件（无value值或value为null）。
所有的 HTML 原生组件都支持 onChange 属性，而且可以用来监听冒泡的 change 事件，同时也提供了 event.target 来访问触发事件的DOM节点。
在React中，对于<textarea/>和<select/>组件，使用value和defaultValue来设置。

以上内容是否对您有帮助：

← React：DOM操作

写笔记

我要补充