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 @   水乙  阅读(686)  评论(0)  编辑  收藏  举报
编辑推荐：
· .NET Core 中如何实现缓存的预热？
· 从 HTTP 原因短语缺失研究 HTTP/2 和 HTTP/3 的设计差异
· AI与.NET技术实操系列：向量存储与相似性搜索在 .NET 中的实现
· 基于Microsoft.Extensions.AI核心库实现RAG应用
· Linux系列：如何用heaptrack跟踪.NET程序的非托管内存泄露
阅读排行：
· TypeScript + Deepseek 打造卜卦网站：技术与玄学的结合
· Manus的开源复刻OpenManus初探
· 三行代码完成国际化适配，妙~啊~
· .NET Core 中如何实现缓存的预热？
· 如何调用 DeepSeek 的自然语言处理 API 接口并集成到在线客服系统
点击右上角即可分享
微信分享提示
SQL AI 助手