首页 > 代码库 > React(二)实现双向数据流

React(二)实现双向数据流

<div id="app"></div>

<script src="bower_components/react/react.min.js"></script>
<script src="bower_components/react/react-dom.min.js"></script>
<!-- 引入React的一个扩展 -->
<script src="bower_components/react/react-with-addons.min.js"></script>
<script src="lib/babel-core/browser.min.js"></script>
<script type="text/babel">
    var EasyForm = React.createClass({
        // 引入mixins
        mixins: [React.addons.LinkedStateMixin],
        getInitialState: function () {
            return {
                message: react is awesome,
                isReactAwesome: true
            }
        },
        render: function () {
            return (
                <div>
                    <h1>我想说:{this.state.message}</h1>
                    <h2>React是不是很好用? {this.state.isReactAwesome ? 非常好用! : 一般般。。。}</h2>
                    <input type="text" valueLink={this.linkState(message)}/>
                    <br/>
                    <input type="checkbox" checkedLink={this.linkState(isReactAwesome)}/>
                    <br/>
                    <SubComp {...this.props}/><!--spread-->
                </div>
            );
        }
    });

    var SubComp = React.createClass({
        render: function () {
            return (
                <div>
                    <h3>这是个子组件哦</h3>
                    <SubSubComp {...this.props}/>
                </div>
            )
        }
    });

    var SubSubComp = React.createClass({
        render: function () {
            return (
                <div>
                    <p>你想说什么?</p>
                    <input type="text" valueLink={this.props.messageLink}/>
                    <p>你稀罕React么?</p>
                    <input type="checkbox" checkedLink={this.props.likeLink}/>
                </div>
            )
        }
    });

    ReactDOM.render(
        <EasyForm/>,
        document.getElementById(app)
    );
</script>

 

React(二)实现双向数据流