React之表单组件

前言

本文主要对表单组件的value和defaultValue进行了学习。

属性

表单组件支持几个受用户交互影响的属性：

value，用于 <input>、<textarea> 组件。
checked，用于类型为 checkbox 或者 radio 的 <input> 组件。
selected，用于 <option> 组件。
在 HTML 中，<textarea> 的值通过子节点设置；在 React 中则应该使用 value 代替。

表单组件可以通过 onChange 回调函数来监听组件变化。当用户做出以下交互时，onChange 执行并通过浏览器做出响应：

<input> 或 <textarea> 的 value 发生变化时。
<input> 的 checked 状态改变时。
<option> 的 selected 状态改变时。
和所有 DOM 事件一样，所有的 HTML 原生组件都支持 onChange 属性，而且可以用来监听冒泡的 change 事件。我们也可以通过表单的submit事件来提交数据到服务器。

看看我们前面入门教程中的CommentForm组件：

//CommentForm组件
var CommentForm = React.createClass({
    handleSubmit:function(e){
      e.preventDefault();
      var author = this.refs.author.value.trim();
      var text = this.refs.text.value.trim();
      if(!text||!author){
        return;
      }
      //发送到服务器
      //清空表单
      //提交表单时调用回调函数
      this.props.onCommentSubmit({author:author,text:text});
      this.refs.author.value='';
      this.refs.text.value='';
      return;
    },
    render:function(){
        return (
            <form className="commentForm" onSubmit={this.handleSubmit}>
              <input type="text" ref="author" placeholder="name" />
              <input type="text" ref="text" placeholder="say something" />
              <input type="submit" value="Post" />
            </form>
        );
    }
});

不受限组件

没有设置 value(或者设为 null) 的 <input> 组件是一个不受限组件。对于不受限的 <input> 组件，渲染出来的元素直接反应用户输入。例如：

  render: function() {
    return <input type="text" />;
  }

上面的代码将渲染出一个空值的输入框，用户输入将立即反应到元素上。和受限元素一样，使用 onChange 事件可以监听值的变化。

如果想给组件设置一个非空的初始值，可以使用 defaultValue 属性。例如：

  render: function() {
    return <input type="text" defaultValue="Hello!" />;
  }

用户可以对默认值defaultValue进行修改。
同样地， 类型为 radio、checkbox 的<input> 支持 defaultChecked 属性， <select> 支持 defaultValue 属性。

受限组件

概念

设置了 value 的 <input> 是一个受限组件。 对于受限的 <input>，渲染出来的 HTML 元素始终保持 value 属性的值。例如：

  render: function() {
    return <input type="text" value="Hello!" />;
  }

上面的代码将渲染出一个值为 Hello! 的 input 元素。用户在渲染出来的元素里输入任何值都不起作用，因为 React 已经赋值为 Hello!。如果想响应更新用户输入的值，就得使用 onChange 事件：

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

上面的代码接受用户输入，并截取前 140 个字符。

存在意义

受限组件存在的意义就是在使用的时候限制用户的一些行为，比如长度、是否满足正则等等。

var MyForm = React.createClass({
  render:function(){
    return (
      <div>
        <input type="text" name="title" value="untitled" />
        <textarea name="description" value="this is a description." />
        <select value="B">
          <option value="A">Apple</option>
          <option value="B">Banana</option>
          <option value="C">Cranberry</option>
        </select>
      </div>
    );
  }
});
React.render(
  <MyForm />,
  document.getElementById('example')
);

我们可以看到textarea的值是通过value来设置的，当然如果我们不需要限制也可以通过defaultValue来设置。