ReactJS学习系列课程React 表单应用

到目前为止，我们已经学习了很多react的特性，对于表单的使用其实也没有大的区别，下面我们为了更加熟悉React,我们纯当练习：我们看看代码吧：

我们创建一个简单form:

//约束组件
        var MyForm = React.createClass({
            getInitialState: function () {
                return {
                    helloTo: "Hello World"
                };
            },handleChange: function (event) {
                this.setState({
                    helloTo: event.target.value.toUpperCase()
                });
            },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>
                )
            }
        })
        ReactDOM.render(<MyForm />,document.getElementById('app'));

表单的select处理：

var MyForm = React.createClass({
            getInitialState: function () {
                return {
                    options: ["B"]
                }
            },handleChange: function (event) {
                var checked = [];
                var sel = event.target;

                for (var i = 0; i < sel.length; i++) {
                    var option = sel.options[i];
                    if (option.selected) {
                        checked.push(option.value);
                    }
                }
                this.setState({options: checked});
            },submitHandler: function (event) {
                event.preventDefault();
                alert(this.state.options);
            },render: function () {
                return (
                        <form onSubmit={this.submitHandler}>
                            <label classsName="name">please select:</label>
                            <br />
                            <select multiple="true" value={this.state.options}
                                    onChange={this.handleChange}>
                                <option value="A">First Option</option>
                                <option value="B">Second Option</option>
                                <option value="C">Third Option</option>
                            </select>
                            <br/>
                            <button type="submit">Speak</button>
                        </form>
                )
            }
        })
        ReactDOM.render(<MyForm />,document.getElementById('app'));

表单name属性处理

//使用DOMNode的name属性来判断需要更新哪个组件的状态
        var MyForm = React.createClass({
            getInitialState: function () {
                return {
                    given_name: "",family_name: ""
                };
            },handleChange: function (event) {
                var newState = {};
                newState[event.target.name] = event.target.value;
                this.setState(newState);
            },submitHandler: function (event) {
                event.preventDefault();
                var words = [
                    "Hi",this.state.given_name,this.state.family_name
                ];
                alert(words.join(" "));
            },render: function () {
                return <form onSubmit={this.submitHandler}>
                    <label htmlFor="given_name">Given Name:</label>
                    <br />
                    <input
                            type="text"
                            name="given_name"
                            value={this.state.given_name}
                            onChange={this.handleChange}/>
                    <br />
                    <label htmlFor="family_name">Family Name:</label>
                    <br />
                    <input
                            type="text"
                            name="family_name"
                            value={this.state.family_name}
                            onChange={this.handleChange}/>
                    <br />
                    <button type="submit">Speak</button>
                </form>;
            }
        });

        ReactDOM.render(<MyForm />,document.getElementById('app'));

linkState的使用：

//使用React的addons中插件
        var MyForm = React.createClass({
            mixins: [React.addons.LinkedStateMixin],getInitialState: function () {
                return {
                    given_name: "",render: function () {
                return <form onSubmit={this.submitHandler}>
                    <label htmlFor="given_name">Given Name:</label>
                    <br />
                    <input
                            type="text"
                            name="given_name"
                            valueLink={this.linkState('given_name')}/>
                    <br />
                    <label htmlFor="family_name">Family Name:</label>
                    <br />
                    <input
                            type="text"
                            name="family_name"
                            valueLink={this.linkState('family_name')}/>
                    <br />
                    <button type="submit">Speak</button>
                </form>;
            }
        });

        ReactDOM.render(<MyForm />,document.getElementById('app'));

自己复制代码尝试一下吧，React的世界很精彩！