一、组件
二、代码
1 <!DOCTYPE html> 2 <html lang="zh-cn"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Mixin</title> 6 </head> 7 <body> 8 <script src="./react-0.13.2/react-0.13.2/build/react-with-addons.js"></script> 9 <script src="./react-0.13.2/react-0.13.2/build/JSXTransformer.js"></script> 10 <script type="text/jsx"> 11 // var BindingExample = React.createClass({ 12 // getInitialState: function() { 13 // return { 14 // text: '' 15 // } 16 // }, 17 // handleChange: function(event) { 18 // this.setState({text: event.target.value}) 19 // }, 20 // render: function() { 21 // return <div> 22 // <input type="text" placeholder="请输入内容" onChange={this.handleChange} /> 23 // <p>{this.state.text}</p> 24 // </div> 25 // } 26 // }) 27 var BindingMixin = { 28 handleChange: function(key) { 29 var that = this 30 var newState = {} 31 return function(event) { 32 33 newState[key] = event.target.value 34 that.setState(newState) 35 } 36 } 37 } 38 var BindingExample = React.createClass({ 39 mixins: [React.addons.LinkedStateMixin], 40 getInitialState: function() { 41 return { 42 text: '', 43 comment: '', 44 } 45 }, 46 render: function() { 47 return <div> 48 <input type="text" placeholder="请输入内容" valueLink={this.linkState('text')} /> 49 <textarea valueLink={this.linkState('comment')}></textarea> 50 <p>{this.state.text}</p> 51 <p>{this.state.comment}</p> 52 </div> 53 } 54 }) 55 React.render(<BindingExample></BindingExample>, document.body); 56 </script> 57 </body> 58 </html>