To be or not to be.That is a question!

---源于莎士比亚的《哈姆雷特》

导航

React getInitialState desc 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script src="../../build/react-with-addons.js"></script>
    <script src="../../build/JSXTransformer.js"></script>
</head>
<body>
    <div id="demo"></div>
    <hr>
    <div id="app"></div>
    <div id="likeBtn"></div>
    <script type="text/jsx">
        /** @jsx React.DOM */
        var HelloMessage = React.createClass({
            render: function () {
                return <div>Hello, {this.props.name}</div>;
            }
        });

        React.renderComponent(<HelloMessage name="Jack"/>, document.getElementById('demo'));
    </script>
    <script type="text/jsx">
        /** @jsx React.DOM */
        var App = React.createClass({
            componentDidMount: function () {
                console.log(this.props.children);
            },
            render: function () {
                return <div><span></span></div>
            }
        });

        React.renderComponent(<App></App>, document.getElementById('app'));
    </script>
    <script type="text/jsx">
        /** @jsx React.DOM */
        var LikeButton = React.createClass({
            getInitialState: function () {
                return {
                    liked: false
                };
            },
            handleClick: function (event) {
                this.setState({
                    liked: !this.state.liked
                });
            },
            handleMouseEnter: function () {
                console.log(this);
            },
            render: function () {
                var text = this.state.liked ? 'like' : 'unlike';
                return (
                    <p onClick= {this.handleClick} >
                        You {text} Click to toggle
                    </p>
                );
            }
        });

        React.renderComponent(<LikeButton />, document.getElementById('likeBtn'));
    </script>
</body>
</html>

 

posted on 2014-09-11 16:37  Ijavascript  阅读(823)  评论(0)  编辑  收藏  举报