React（一）基础点

prop实例

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

<script src="bower_components/react/react.min.js"></script>
<script src="bower_components/react/react-dom.min.js"></script>
<script src="lib/babel-core/browser.min.js"></script>
<script type="text/babel">
    var MessageBox = React.createClass({
        getInitialState: function () {
            return {
                isVisible: true,
                titleMessage: '你好世界（来自state哦）',
                subMessages: [
                    '我会代码搬砖',
                    '以及花式搬砖',
                    '不说了，工头叫我回去搬砖了。。。。。'
                ]
            }
        },
        render: function () {
            return (
                <div>
                    <h1>{this.state.titleMessage}</h1>
                    <SubMessage messages={this.state.subMessages} />
                </div>
            )
        }
    });
    var SubMessage = React.createClass({
        propTypes: {
            messages: React.PropTypes.array.isRequired
        },
        getDefaultProps: function () {
            return {
                messages: ['默认的子消息'] // 防止this.props.messages不存在
            }
        },
        render: function () {
            var msgs = [];
            this.props.messages.forEach(function (msg, index) {
                msgs.push(
                        <p>码农说：{msg}</p>
                );
            });

            return (
                <div>{msgs}</div>
            )
        }
    });

    var messageBox = ReactDOM.render(
        <MessageBox/>,
        document.getElementById('app')
    );
</script>

表单监听事件（非常麻烦，下一段代码有替代的）

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

<script src="bower_components/react/react.min.js"></script>
<script src="bower_components/react/react-dom.min.js"></script>
<script src="lib/babel-core/browser.min.js"></script>
<script type="text/babel">
    var FormApp = React.createClass({
        getInitialState: function () {
            return {
                inputValue: 'input value',
                selectValue: 'A',
                radioValue: 'B',
                textareaValue: 'some text here'
            }
        },
        // 监听表单值的改变
        handleInput: function (e) {
            this.setState({
                inputValue: e.target.value
            });
        },
        handleSelect: function (e) {
            this.setState({
                selectValue: e.target.value
            });
        },
        handleSubmit: function (e) {
            e.preventDefault();
            console.log('form submit');
            console.log(e);
        },
        render: function () {
            return (
                <div>
                    <form action="" onSubmit={this.handleSubmit}>
                        <input type="text" value={this.state.inputValue} onChange={this.handleInput}/>
                        <select name="" id="" value={this.state.selectValue} onChange={this.handleSelect}>
                            <option value="A">A</option>
                            <option value="B">B</option>
                            <option value="C">C</option>
                            <option value="D">D</option>
                            <option value="E">E</option>
                        </select>
                        <br/>
                        <p>radio button!</p>
                        <input type="radio" name="goodRadio" value="A"/>
                        <input type="radio" name="goodRadio" defaultChecked value="B"/>
                        <input type="radio" name="goodRadio" value="C"/>
                        <br/>
                        <input type="checkbox" name="goodRadio" value="A"/>
                        <input type="checkbox" name="goodRadio" value="B"/>
                        <input type="checkbox" name="goodRadio" defaultChecked value="C"/>
                        <br/>
                        <textarea name="" id="" cols="30" rows="10" value={this.state.textareaValue}>

                        </textarea>
                        <button type="submit">提交</button>
                    </form>
                </div>
            )
        }
    });

    var messageBox = ReactDOM.render(
        <FormApp/>,
        document.getElementById('app')
    );
</script>

指向ref

var FormApp = React.createClass({
        getInitialState: function () {
            return {
                inputValue: 'input value',
                selectValue: 'A',
                radioValue: 'B',
                checkboxValues: ['C'],
                textareaValue: 'some text here'
            }
        },
        handleSubmit: function (e) {
            e.preventDefault();
            console.log('form submit');
            var formData = {
                input: this.refs.myInput.value,
                select: this.refs.mySelect.value,
                textarea: this.refs.myTextarea.value,
                radio: this.state.radioValue,
                check: this.state.checkboxValues
            };
            console.log('the form result is: ');
            console.log(formData);

        },
        handleRadio: function (e) {
            this.setState({
                radioValue: e.target.value
            });
        },
        handleCheck: function (e) {
            var checkboxValues = this.state.checkboxValues.slice();
            var newVal = e.target.value;
            var index = checkboxValues.indexOf(newVal);

            if(index == -1) {
                checkboxValues.push(newVal);
            } else {
                // 存在了删除掉
                checkboxValues.splice(index, 1);
            }

            this.setState({
                checkboxValues: checkboxValues
            });
        },
        render: function () {
            return (
                <div>
                    <form action="" onSubmit={this.handleSubmit}>
                        <input ref="myInput" type="text" defaultValue={this.state.inputValue}/>
                        选项：
                        <select name="" id="" defaultValue={this.state.selectValue} ref="mySelect">
                            <option value="A">A</option>
                            <option value="B">B</option>
                            <option value="C">C</option>
                            <option value="D">D</option>
                            <option value="E">E</option>
                        </select>
                        <br/>
                        <p>radio button!</p>
                        <RadioButtons handleRadio={this.handleRadio} />
                        <br/>
                        <CheckboxButtons handleCheck={this.handleCheck} />
                        <br/>
                        <textarea name="" id="" cols="30" rows="10" defaultValue={this.state.textareaValue} ref="myTextarea">

                        </textarea>
                        <button type="submit">提交</button>
                    </form>
                </div>
            )
        }
    });

    var RadioButtons = React.createClass({
        render: function () {
            return (
                <div>
                    A
                    <input onChange={this.props.handleRadio} type="radio" name="goodRadio" value="A"/>
                    B
                    <input onChange={this.props.handleRadio} type="radio" name="goodRadio" defaultChecked value="B"/>
                    C
                    <input onChange={this.props.handleRadio} type="radio" name="goodRadio" value="C"/>
                </div>
            );
        }
    });

    var CheckboxButtons = React.createClass({
        render: function () {
            return (
                <div>
                    A
                    <input onChange={this.props.handleCheck} type="checkbox" name="A" value="A"/>
                    B
                    <input onChange={this.props.handleCheck} type="checkbox" name="B" value="B"/>
                    C
                    <input onChange={this.props.handleCheck} type="checkbox" name="C" defaultChecked value="C"/>
                </div>
            )
        }
    });

    var messageBox = ReactDOM.render(
        <FormApp/>,
        document.getElementById('app')
    );