React实现双向数据流

Posted 2020-08-22

<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>