React组件-mixin

一、组件

二、代码

 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>

 

posted @ 2015-12-18 23:03  shamgod  阅读(527)  评论(0)  编辑  收藏  举报
haha