React.js学习笔记（一）：组件协同与mixin

组件协同：

<!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>
View Code

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>
View Code
posted @ 2015-11-02 00:49  水乙  阅读(682)  评论(0)  编辑  收藏  举报