加入收藏 | 设为首页 | 会员中心 | 我要投稿 李大同 (https://www.lidatong.com.cn/)- 科技、建站、经验、云计算、5G、大数据,站长网!
当前位置: 首页 > 百科 > 正文

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

发布时间:2020-12-15 03:29:40 所属栏目:百科 来源:网络整理
导读:到目前为止,我们已经学习了很多react的特性,对于表单的使用其实也没有大的区别,下面我们为了更加熟悉React,我们纯当练习:我们看看代码吧: 我们创建一个简单form: //约束组件 var MyForm = React.createClass({ getInitialState: function () { return {

到目前为止,我们已经学习了很多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的世界很精彩!

(编辑:李大同)

【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容!

    推荐文章
      热点阅读