6. React 表单使用介绍

        表单是前端页面中非常重要也是非常常用的一个内容，react 也在表单方面进行了很多封装，让开发者可以方便快捷地在 react 组件中使用表单。下面介绍如何在组件中正确的使用表单，从而可以让表单更好地和组件结合在一起。 

不可控组件和可控组件介绍

        不可控，抛弃了状态，不使用React的数据流。

        组件可控的好处：

        符合React的数据流

        数据存储在state中，便于使用

        便于对数据进行处理

不可控组建

<script src="./react-0.13.2/react-0.13.2/build/react.js"></script>
<script src="./react-0.13.2/react-0.13.2/build/JSXTransformer.js"></script>
<script type="text/jsx">
    var MyForm = React.createClass({
        submitHandler: function (event) {
            event.preventDefault();
            var helloTo = React.findDOMNode(this.refs.helloTo).value;
            alert(helloTo);
        },
        render: function () {
            return <form onSubmit={this.submitHandler}>
                <input
                    ref="helloTo"
                    type="text"
                    defaultValue="Hello World!" />
                <br />
                <button type="submit">Speak</button>
            </form>;
        }
    });
    React.render(<MyForm></MyForm>, document.body);
</script>

可控组件

<script src="./react-0.13.2/react-0.13.2/build/react-with-addons.js"></script>
<script src="./react-0.13.2/react-0.13.2/build/JSXTransformer.js"></script>
<script type="text/jsx">
    var MyForm = React.createClass({
        getInitialState: function () {
            return {
                helloTo: "Hello World!"
            };
        },
        handleChange: function (event) {
            this.setState({
                helloTo: event.target.value
            });
        },
        submitHandler: function (event) {
            event.preventDefault();
            alert(this.state.helloTo);
        },
        render: function () {
            return <form onSubmit={this.submitHandler}>
                <input type="text" value={this.state.helloTo} onChange={this.handleChange} />
                <br />
                <button type="submit">Speak</button>
            </form>;
        }
    });
    React.render(<MyForm></MyForm>, document.body);
</script>

不同表单元素的使用

<script src="./react-0.13.2/react-0.13.2/build/react-with-addons.js"></script>
<script src="./react-0.13.2/react-0.13.2/build/JSXTransformer.js"></script>
<script type="text/jsx">
    var MyForm = React.createClass({
        getInitialState: function () {
            return {
                username: "",
                gender: "man",
                checked: true
            };
        },
        handleUsernameChange: function (event) {
            this.setState({
                username: event.target.value
            });
        },
        handleGenderChange: function (event) {
            this.setState({
                gender: event.target.value
            });
        },
        handleCheckboxChange: function (event) {
            this.setState({
                checked: event.target.checked
            });
        },
        submitHandler: function (event) {
            event.preventDefault();
            console.log(this.state);
        },
        render: function () {
            return <form onSubmit={this.submitHandler}>
                <label htmlFor="username">请输入用户名:</label>
                <input id="username" type="text" value={this.state.username} onChange={this.handleUsernameChange} />
                <br />
                <select value={this.state.gender} onChange={this.handleGenderChange}>
                    <option value="man">男</option>
                    <option value="woman">女</option>
                </select>
                <br />
                <label htmlFor="checkbox">同意用户协议</label>
                <input id="checkbox" type="checkbox" value="agree" checked={this.state.checked} onChange={this.handleCheckboxChange} />
                <button type="submit">注册</button>
            </form>;
        }
    });
    React.render(<MyForm></MyForm>, document.body);
</script>

事件处理函数复用

bind复用

<script src="./react-0.13.2/react-0.13.2/build/react-with-addons.js"></script>
<script src="./react-0.13.2/react-0.13.2/build/JSXTransformer.js"></script>
<script type="text/jsx">
    var MyForm = React.createClass({
        getInitialState: function () {
            return {
                username: "",
                gender: "man",
                checked: true
            };
        },
        handleChange: function (name, event) {
            var newState = {};
            newState[name] = name == "checked" ? event.target.checked : event.target.value;
            this.setState(newState);
        },
        submitHandler: function (event) {
            event.preventDefault();
            console.log(this.state);
        },
        render: function () {
            return <form onSubmit={this.submitHandler}>
                <label htmlFor="username">请输入用户名:</label>
                <input id="username" type="text" value={this.state.username} onChange={this.handleChange.bind(this, "username")} />
                <br />
                <select value={this.state.gender} onChange={this.handleChange.bind(this, "gender")}>
                    <option value="man">男</option>
                    <option value="woman">女</option>
                </select>
                <br />
                <label htmlFor="checkbox">同意用户协议</label>
                <input id="checkbox" type="checkbox" value="agree" checked={this.state.checked} onChange={this.handleChange.bind(this, "checked")} />
                <button type="submit">注册</button>
            </form>;
        }
    });
    React.render(<MyForm></MyForm>, document.body);
</script>

name复用

<script src="./react-0.13.2/react-0.13.2/build/react-with-addons.js"></script>
<script src="./react-0.13.2/react-0.13.2/build/JSXTransformer.js"></script>
<script type="text/jsx">
    var MyForm = React.createClass({
        getInitialState: function () {
            return {
                username: "",
                gender: "man",
                checked: true
            };
        },
        handleChange: function (event) {
            var newState = {};
            newState[event.target.name] = event.target.name == "checked" ? event.target.checked : event.target.value;
            this.setState(newState);
        },
        submitHandler: function (event) {
            event.preventDefault();
            console.log(this.state);
        },
        render: function () {
            return <form onSubmit={this.submitHandler}>
                <label htmlFor="username">请输入用户名:</label>
                <input name="username" id="username" type="text" value={this.state.username} onChange={this.handleChange} />
                <br />
                <select name="gender" value={this.state.gender} onChange={this.handleChange}>
                    <option value="man">男</option>
                    <option value="woman">女</option>
                </select>
                <br />
                <label htmlFor="checkbox">同意用户协议</label>
                <input id="checkbox" name="checked" type="checkbox" value="agree" checked={this.state.checked} onChange={this.handleChange} />
                <button type="submit">注册</button>
            </form>;
        }
    });
    React.render(<MyForm></MyForm>, document.body);
</script>

表单组件自定义

        自定义表单组建原因

        内因：表单本身具备特殊性：样式统一、信息内聚、行为固定

        外因：本质上是组件嵌套，组织和管理组件的一种方式

<script src="./react-0.13.2/react-0.13.2/build/react-with-addons.js"></script>
<script src="./react-0.13.2/react-0.13.2/build/JSXTransformer.js"></script>
<script type="text/jsx">
    var Radio = React.createClass({
        getInitialState: function () {
            return {
                value: this.props.defaultValue
            };
        },
        handleChange: function (event) {
            if (this.props.onChange) {
                this.props.onChange(event);
            }
            this.setState({
                value: event.target.value
            });
        },
        render: function () {
            var children = {};
            var value = this.props.value || this.state.value;
            React.Children.forEach(this.props.children, function (child, i) {
               var label = <label>
                    <input type="radio" name={this.props.name} value={child.props.value} checked={child.props.value == value} onChange={this.handleChange} />
                    {child.props.children}
                    <br/>
                </label>;
               children['label' + i] = label;
            }.bind(this));
            return <span>{children}</span>;
        }
    });
    // 不可控组件
    /*var MyForm = React.createClass({
        submitHandler: function (event) {
            event.preventDefault();
            alert(this.refs.radio.state.value);
        },
        render: function () {
            return <form onSubmit={this.submitHandler}>
                <Radio ref="radio" name="my_radio" defaultValue="B">
                    <option value="A">First Option</option>
                    <option value="B">Second Option</option>
                    <option value="C">Third Option</option>
                </Radio>
                <button type="submit">Speak</button>
            </form>;
        }
    });
    React.render(<MyForm></MyForm>, document.body);*/
    // 可控组件
    var MyForm = React.createClass({
        getInitialState: function () {
            return {my_radio: "B"};
        },
        handleChange: function (event) {
            this.setState({
                my_radio: event.target.value
            });
        },
        submitHandler: function (event) {
            event.preventDefault();
            alert(this.state.my_radio);
        },
        render: function () {
            return <form onSubmit={this.submitHandler}>
                <Radio name="my_radio" value={this.state.my_radio} onChange={this.handleChange}>
                    <option value="A">First Option</option>
                    <option value="B">Second Option</option>
                    <option value="C">Third Option</option>
                </Radio>
                <button type="submit">Speak</button>
            </form>;
        }
    });
    React.render(<MyForm></MyForm>, document.body);
</script>