zoukankan html css js c++ java

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

查看全文

相关阅读:
ElasticSearch集群设置
 NEST与JSON语法对照一 match与multi_match
某墙尼妹，用个Response.Filter来解决StackExchange.Exceptional中google cdn的问题
 高频
 Linux 后台执行命令
 Mysql 常用函数汇总
 Golang 昨天、今天和明天
 Golang——Cron 定时任务
 Golang 资料整理
 Golang: for range

原文地址：https://www.cnblogs.com/shuiyi/p/4929099.html