React入门笔记（三）：表单、事件、Ref属性

React入门笔记（一）：简介和JSX
React入门笔记（二）：组件和AJAX
React入门笔记（三）：表单、事件、Ref属性
React中的Diff算法——Christopher Chedeau（原文翻译）

一、React表单

以下给出几个栗子介绍如何在React中使用表单。

1. 最简单的例子：更新state
   在实例中设置了输入框input值value={this.state.data}。在输入框值发生变化时可以更新state。可以使用onChange事件来监听input的变化并修改state。代码将渲染出一个值为Hello React!的input元素，并通过onChange事件响应更新用户输入的值。

   var HelloMessage = React.createClass({    getInitialState: function() {        return {value: "Hello React!"};    },    handleChange: function(event){        this.setState({value: event.target.value});    },    render: function() {        var value = this.state.value;        return (            <div>                <input type="text" value={value} onChange={this.handleChange} />                <h4>{value}</h4>            </div>        );    }});ReactDOM.render(  <HelloMessage />,  document.getElementById('example'));

2. 在子组件上使用表单：更新prop
   onChange方法将触发state的更新并将更新的值传递到子组件的输入框的value上来重新渲染界面。在父组件创建事件句柄（handleChange），并作为prop（updateStateProp）传递到你的子组件上。

   var Content  = React.createClass({    render: function() {        return (            <div>                <input type="text" value={this.props.myDataProp} onChange={this.props.updateStateProp} />                <h4>{this.props.myDataProp}</h4>            </div>        );    }});var HelloMessage = React.createClass({    getInitialState: function() {        return {value: 'Hello React!'};    },    handleChange: function(event) {        this.setState({value: event.target.value});    },    render: function() {        var value = this.state.value;        return (            <div>                <Content myDataProp={value} updateStateProp={this.handleChange}></Content>            </div>        );    }});ReactDOM.render(    <HelloMessage />,    document.getElementById('example'));

二、React事件

1. 最简单的例子：更新state
   以下栗子通过onClick事件来修改数据：

   var HelloMessage = React.createClass({    getInitialState: function() {        return {value: 'Hello React!'};    },    handleChange: function(event) {        this.setState({value: 'Hi~'});    },    render: function() {        var value = this.state.value;        return (            <div>                <button onClick={this.handleChange}>点击</button>                <h4>{value}</h4>            </div>        );    }});ReactDOM.render(    <HelloMessage />,    document.getElementById('example'));

2. 在子组件上响应事件：prop
   当需要从子组件中更新父组件的state时，需要在父组件创建事件句柄（handleChange），并作为prop（updateStateProp）传递到子组件上，栗子如下：

   var Content  = React.createClass({    render: function() {        return (            <div>                <button onClick={this.props.updateStateProp}>点击</button>                <h4>{this.props.myDataProp}</h4>            </div>        );    }});var HelloMessage = React.createClass({    getInitialState: function() {        return {value: 'Hello React!'};    },    handleChange: function(event) {        this.setState({value: 'Hi~'});    },    render: function() {        var value = this.state.value;        return (            <div>                <Content myDataProp={value} updateStateProp={this.handleChange}></Content>            </div>        );    }});ReactDOM.render(    <HelloMessage />,    document.getElementById('example'));

三、React Refs

组件并不是真实的DOM节点，而是存在于内存之中的一种数据结构，叫做虚拟DOM（virtual DOM）。只有当组件插入文档之后，才会变成真实的DOM。根据React的设计，所有的DOM变动，都现在虚拟DOM上发生，然后再将实际发生变动的部分反映在真实DOM上，这种算法叫做DOM diff，它可以极大提高网页的性能表现。
当需要从组件获取真实DOM的节点时，就需要用到一种非常特殊的属性Ref，可以用来绑定到render()输出的任何组件上。这个特殊的属性允许开发者引用render()返回的相应的支撑实例（backing instance），这样就可以确保在任何时间总是拿到正确的实例。
组件支撑实例是React在其文档的各处可引用的真实DOM节点。

1. 使用方法
   绑定一个ref属性到render的返回值上：

   <input ref="myInput" />

   在其他代码中，通过this.refs获取支撑实例：

   var input = this.refs.myInput;var inputValue = input.value;var inputRect = input.getBoundingClientRect();

2. 完整实例
   使用this来获取当前React组件，或使用ref来获取组件的引用，实例如下：

   var MyComponent = React.createClass({    handleClick: function() {        // 使用原生的DOM API获取焦点        this.refs.myInput.focus();    },    render: function() {        // 当组件插入到DOM后，ref属性添加一个组件的引用到`this.refs`        return (            <div>                <input type="text" ref="myInput" />                <input type="button" value="点击按钮后输入框获取焦点" onClick={this.handleClick} />            </div>        );    }});ReactDOM.render(    <MyComponent />,    document.getElementById('example'));

   上述栗子中，获取了输入框的支撑实例的引用，点击按钮之后输入框获取焦点。也可以使用getDOMNode()方法获取DOM元素。
   需要注意的是，由于this.refs.[refName]属性获取的是真实DOM，所以必须等到虚拟DOM插入文档之后，才能使用这个属性，否则会报错。上面代码中，通过为组件指定Click事件的回调函数，确保了只有等到真实DOM发生Click事件之后，才会读取this.refs.[refName]属性。
   React组件支持的事件很多，如Click、KeyDown、Copy、Scroll等，完整的事件清单可看官方文档或者在稍后的博客中会给出附录介绍。

三、参考

[1] React教程
[2] React 入门实例教程