React form

来源

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

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

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

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

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

和所有 DOM 事件一样，所有的 HTML 原生组件都支持 onChange 属性，而且可以用来监听冒泡的 change 事件。

一、受限组件

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

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

React.render(
    <FormClass />,
    document.getElementById('demo1')
);

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

var FormClass2 = 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}/>;
    }
});

React.render(
    <FormClass2 />,
    document.getElementById('demo2')
);

上面的代码中，React 将用户输入的值更新到 <input> 组件的 value 属性。这样实现响应或者验证用户输入的界面就很容易了。例如：

handleChange: function(event) {
    this.setState({value: event.target.value.substr(0, 140)});
}

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

二、不受限组件

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

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

React.render(
    <FormClass3 />,
    document.getElementById('demo3')
);

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

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

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

上面的代码渲染出来的元素和受限组件一样有一个初始值，但这个值用户可以改变 并会反应到界面上。

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

var FormClass4 = React.createClass({
    render: function () {
        var style = {marginTop: 10};

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

React.render(
    <FormClass4 />,
    document.getElementById('demo4')
);

三、高级主题

1、为什么使用受限组件？

在 React 中使用诸如 <input> 的表单组件时，遇到了一个在传统 HTML 中没有的挑战。
比如下面的代码：

    <input type="text" name="title" value="Untitled" />

在 HTML 中将渲染初始值为 Untitled 的输入框。用户改变输入框的值时，节点的 value 属性（property）将随之变化， 但是 node.getAttribute('value') 还是会返回初始设置的值 Untitled.

与 HTML 不同，React 组件必须在任何时间点描绘视图的状态，而不仅仅是在初始化时。比如在 React 中：

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

该方法在任何时间点渲染组件以后，输入框的值就应该始终为 Untitled。

2、为什么 使用 value 属性？

在 HTML 中， <textarea> 的值通常使用子节点设置：

 <!-- 反例：在 React 中不要这样使用！ -->
 <textarea name="description">This is the description.</textarea>

对 HTML 而言，让开发者设置多行的值很容易。但是，React 是 JavaScript，没有字符限制，可以使用 \n 实现换行。简言之，React 已经有 value、defaultValue 属性，</textarea> 组件的子节点扮演什么角色就有点模棱两可了。基于此， 设置 <textarea> 值时不应该使用子节点：

<textarea name="description" value="This is a description." />

如果非要使用子节点，效果和使用 defaultValue 一样。

3、 为什么 使用 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。

注意：
给 value 属性传递一个数组，可以选中多个选项：<select multiple={true} value={['B', 'C']}>。

var FormClass5 = React.createClass({
    render: function () {
        var style = {marginTop: 10};

        /*<select multiple={true} defaultValue={['B','C']} style={style}>*/
        return (
            <div>
                <select multiple={true} value={['B','C']} style={style}>
                    <option value="A">Apple</option>
                    <option value="B">Banana</option>
                    <option value="C">Cranberry</option>
                </select>
            </div>
        );
    }
});

React.render(
    <FormClass5 />,
    document.getElementById('demo5')
);