標籤：
一、組件
二、代碼
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 = this30 var newState = {}31 return function(event) {32 33 newState[key] = event.target.value34 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>
React組件-mixin
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
