您的位置：首页 > Web前端 > React

React组件-mixin

2015-12-18 23:03 633 查看

一、组件

二、代码

<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="UTF-8">
<title>Mixin</title>
</head>
<body>
<script src="./react-0.13.2/react-0.13.2/build/react-with-addons.js"></script>
<script src="./react-0.13.2/react-0.13.2/build/JSXTransformer.js"></script>
<script type="text/jsx">
// var BindingExample = React.createClass({
//     getInitialState: function() {
//         return {
//             text: ''
//         }
//     },
//     handleChange: function(event) {
//         this.setState({text: event.target.value})
//     },
//     render: function() {
//         return <div>
//             <input type="text" placeholder="请输入内容" onChange={this.handleChange} />
//             <p>{this.state.text}</p>
//         </div>
//     }
// })
var BindingMixin = {
handleChange: function(key) {
var that = this
var newState = {}
return function(event) {

newState[key] = event.target.value
that.setState(newState)
}
}
}
var BindingExample = React.createClass({
mixins: [React.addons.LinkedStateMixin],
getInitialState: function() {
return {
text: '',
comment: '',
}
},
render: function() {
return <div>
<input type="text" placeholder="请输入内容" valueLink={this.linkState('text')} />
<textarea valueLink={this.linkState('comment')}></textarea>
<p>{this.state.text}</p>
<p>{this.state.comment}</p>
</div>
}
})
React.render(<BindingExample></BindingExample>, document.body);
</script>
</body>
</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航