接下来，我们将介绍在处理表单时JSX 和HTML 的一些区别。 # 1、onChange 处理器 在使用表单元素时，用户会与表单进行交互，并改变元素值。在React 中，你可以通过onChange 属性订阅这些属性发生的更改。该方法可以监听单选按钮和选择框的checked 属性变化，以及`<select> `下拉框的selected 属性变化，此外还可以监听文本框和`<input type="text">` 的输入内容变化，onChange 事件会在用户输入时触发，相比于在元素失去焦点时才触发的onchange 原生事件，前者更具实用性。这意味着，我们不需要为了监听用户输入而订阅所有的鼠标事件和键盘事件了。 # 　2、value 和defaultValue 的区别 在HTML 中，如果你创建一个输入框`<input id="i" value="hello" />`，然后在输入框中键入bye，你会发现： ``` i.value; // "bye" i.getAttribute('value'); // "hello" ``` 而在React 中，value 属性总是和文本输入框的最新内容保持一致。如果你想指定默认值，可以使用defaultValue 属性。 在下面这个代码片段中，你拥有一个`<input>` 组件。该组件预先填充的内容为hello，还绑定了一个onChange 处理器。当把hello 的最后一个字符o 删掉时，value 的值变为hell，而defaultValue 的值仍然是hello： ``` function log(event) { console.log("value: ", event.target.value); console.log("defaultValue: ", event.target.defaultValue); } React.render( <input defaultValue="hello" onChange={log} />, document.getElementById('app') ); ``` 你应当把这种模式应用到自定义组件中：如果你需要接收一个属性，并暗示用户该属性应该一直是最新的（比如value、data），就让其保持更新。否则请把属性名改为initialData（在第3 章讨论过）或者defaultValue，以保证结果符合预期。 # 3、`textarea` 的值 为了和文本输入框保持一致，React 版本的`<textarea> `组件同样能够接收value 和defaultValue 属性，其中value 属性值保持最新，而defaultValue 则和原来的值保持一致。如果你依然坚持HTML 风格，也就是使用`<textarea>` 的子节点来定义值（不推荐这样做），React 会把子节点的值定义为defaultValue。 在HTML 中，`<textarea>`（按照W3C 的定义）之所以要把子节点作为值，是为了方便开发者在输入内容中进行换行。然而，基于JavaScript 的React 不会受到这样的限制。当你需要换行时，只需要使用`\n `即可。 请思考下面这个例子的输出结果，答案如图4-9 所示： ``` function log(event) { console.log(event.target.value); console.log(event.target.defaultValue); } React.render( <textarea defaultValue="hello\nworld" onChange={log} />, document.getElementById('app1') ); React.render( <textarea defaultValue={"hello\nworld"} onChange={log} />, document.getElementById('app2') ); React.render( <textarea onChange={log}>hello world , document.getElementById('app3') ); React.render( {"hello\n\ world"} , document.getElementById('app4') ); ```  图4-9：在`` 中换行 要注意文本串"hello\nworld" 与JavaScript 字符串{"hello\nworld"} 作为属性值时的区别。 此外还要注意，在JavaScript 中，多行字符串需要使用\ 进行转义（参见第4 个例子）。 在这个例子的最后，React 会在使用传统方法设置`<textarea> `子节点的值时，在控制台中发出警告。 # 4、select 的值 当你在HTML 中使用`<select>` 标签时，可以通过`<option selected> `指定预先选择的项，比如这样： ``` <!-- 传统HTML --> <select> <option value="stay">Should I stay</option> <option value="move" selected>or should I go</option> </select> ``` 在React 中，则可以通过value 或者更好的defaultValue 来给`<select> `元素指定值： ``` // React/JSX <select defaultValue="move"> <option value="stay">Should I stay</option> <option value="move">or should I go</option> </select> ``` 这同样适用于多重选择的情况，只需提供一个包含预选择值的数组： ``` <select defaultValue={["stay", "move"]} multiple={true}> <option value="stay">Should I stay</option> <option value="move">or should I go</option> <option value="trouble">If I stay it will be trouble</option> </select> ``` 如果你把上述两种方式搞混了，React 会在你为`<option>` 标签设置selected属性时给予警告提示。 也可以使用`<select value>` 代替`<select defaultValue>`，但是不推荐这样做，因为这需要你手动更新用户看到的值。否则，当用户选择了一个不同的选项时，`<select>` 显示的内容不会发生变化。换而言之，你需要进行类似这样的处理： ``` var MySelect = React.createClass({ getInitialState: function() { return {value: 'move'}; }, _onChange: function(event) { this.setState({value: event.target.value}); }, render: function() { return ( <select value={this.state.value} onChange={this._onChange}> <option value="stay">Should I stay</option> <option value="move">or should I go</option> <option value="trouble">If I stay it will be trouble</option> </select> ); } }); ```