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

来源：互联网发布：手机联系人数据恢复编辑：程序博客网时间：2024/05/01 11:13

这里写图片描述

到目前为止，我们已经学习了很多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: "",                    family_name: ""                };            },            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"                            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的世界很精彩！

0 0