React: State – Init HTML

Giới thiệu State trong ReactJS.

Mã nguồn tham khảo:

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8" />
    <title>State</title>
    <script src="https://npmcdn.com/[email protected]/dist/react.min.js"></script>
    <script src="https://npmcdn.com/[email protected]/dist/react-dom.min.js"></script>
    <script src="https://npmcdn.com/[email protected]/browser.min.js"></script>
</head>
<body>
    <div id="example"></div>

    <script type="text/babel">
        var Checkbox = React.createClass({
            getInitialState: function() {
                return {checked: true}
            },
            handleChecked: function() {
                this.setState({checked: !this.state.checked});
            },
            render: function() {
                var msg;

                if (this.state.checked) {
                    msg = "Checked";
                } else {
                    msg = "Uncheck";
                }

                return (
                    <div>
                        <input type="checkbox" onChange={this.handleChecked} defaultChecked={this.state.checked} />
                        <span>Checkbox is {msg}</span>
                    </div>
                );
            }
        });

        ReactDOM.render(<Checkbox />, document.getElementById('example'));
    </script>
</body>
</html>