组件协同：
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>父子关系</title> </head> <body> <script src="react.js"></script> <script src="JSXTransformer.js"></script> <script type="text/jsx"> var GenderSelect = React.createClass({ render: function() { return <select onChange={this.props.handleSelect}> <option value="0">男</option> <option value="1">女</option> </select> } }); var SignUpForm = React.createClass({ getInitialState:function(){ return { name:"", password:"", gender:"" } }, handleChange:function(name,event){ var newState = {}; newState[name] = event.target.value; this.setState(newState); }, handleSelect: function (event) { this.setState({gender: event.target.value}) }, render: function () { console.log(this.state); return <form> <input type="text" placeholder="请输入用户名" onChange = {this.handleChange.bind(this,‘name‘)}/> <input type="password" placeholder="请输入密码" onChange = {this.handleChange.bind(this,‘password‘)}/> <GenderSelect handleSelect={this.handleSelect}></GenderSelect> </form> } }); React.render(<SignUpForm></SignUpForm>,document.body); </script> </body> </html>
mixin：
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>Mixin</title> </head> <body> <script src="react.js"></script> <script src="JSXTransformer.js"></script> <script type="text/jsx"> var BindingMixIn = { handleChange: function (key) { var that = this; return function(event){ var newState = {}; newState[key] = event.target.value; that.setState(newState); } } }; var BindingExample = React.createClass({ mixins:[BindingMixIn], getInitialState: function () { return { text: ‘‘, comment:‘‘ } }, render: function () { return <div> <input type="text" placeholder="请输入内容" onChange={this.handleChange(‘text‘)}/> <textarea placeholder="请输入内容" onChange={this.handleChange(‘comment‘)}></textarea> <p>{this.state.text}</p> <p>{this.state.comment}</p> </div> } }) React.render(<BindingExample></BindingExample>, document.body) </script> </body> </html>
原文：http://www.cnblogs.com/shuiyi/p/4929099.html
