React 表单组件

诸如 <input>、<textarea>、<option> 这样的表单组件不同于其他组件，因为他们可以通过用户交互发生变化。这些组件提供的界面使响应用户交互的表单数据处理更加容易。

 

交互属性

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

• value，用于 <input>、<textarea> 组件。
• checked，用于类型为 checkbox 或者 radio 的 <input> 组件。
• selected，用于 <option> 组件。

在 HTML 中，<textarea> 的值通过子节点设置；在 React 中则应该使用 value 代替。

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

• <input> 或 <textarea> 的 value 发生变化时。
• <input> 的 checked 状态改变时。
• <option> 的 selected 状态改变时。

 

受限组件

设置了 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});
  },
  render: function() {
    var value = this.state.value;
    return <input type="text" value={value} onChange={this.handleChange} />;
  }

 

不受限组件

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

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

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

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

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

 

同样地， 类型为 radio、checkbox 的<input> 支持 defaultChecked 属性， <select> 支持 defaultValue 属性。

  render: function() {
      return (
          <div>
            <input type="radio" name="opt" defaultChecked /> Option 1
            <input type="radio" name="opt" /> Option 2
            <select defaultValue="C">
              <option value="A">Apple</option>
              <option value="B">Banana</option>
              <option value="C">Cranberry</option>
            </select>
          </div>
      );
    }

 

<select> 使用 value 属性

HTML 中 <select> 通常使用 <option> 的 selected 属性设置选中状态；React 为了更方面的控制组件，采用以下方式代替：

  <select value="B">
    <option value="A">Apple</option>
    <option value="B">Banana</option>
    <option value="C">Cranberry</option>
  </select>

如果是不受限组件，则使用 defaultValue。

 

转载于:https://www.cnblogs.com/vs1435/p/7340417.html