React 从入门到进阶之路（六）

之前的文章我们介绍了 React 表单事件 键盘事件 事件对象以及 React中 的 ref 获取 dom 节点 、双向数据绑定。接下来我们将介绍 React 表单详解 约束性和非约束性组件 input text checkbox radio  select  textarea  以及获取表单的内容。

import React, {Component} from 'react';

class Home extends Component {
    constructor(props) {
        super(props);
        this.state = {
            name: "",
            sex: "1",
            city: "",
            cities: ["北京", "上海", "南京"],
            hobbies: [{
                title: "抽烟", checked: true
            }, {
                title: "喝酒", checked: false
            }, {
                title: "烫头", checked: false
            }],
            info: "",
        }

    }

    // 获取所有数据
    getAllData = (event) => {
        event.preventDefault();
        console.log(this.state)
    }

    // 名字
    changeName = (event) => {
        this.setState({
            name: event.target.value
        })
    }

    // 性别
    changeSex = (event) => {
        this.setState({
            sex: event.target.value
        })
    }

    // 地址
    changeCity = (event) => {
        this.setState({
            city: event.target.value
        })
    }

    // 爱好
    changeHobbies = (key) => {
        let hobbies = this.state.hobbies;
        hobbies[key].checked = !hobbies[key].checked;
        this.setState({
            hobbies: hobbies
        })
    }

    // 简介
    changeInfo = (event) => {
        this.setState({
            info: event.target.value
        })
    }

    render() {
        return (
            <div>
                <p>Hello {this.state.name}</p>
                <form action="" onSubmit={this.getAllData}>

                    用户名：
                    <input value={this.state.name} onChange={this.changeName} type="text"/>

                    <br/><br/>

                    性别：
                    男<input value="1" checked={this.state.sex === "1"} onChange={this.changeSex} type="radio"/>
                    女<input value="2" checked={this.state.sex === "2"} onChange={this.changeSex} type="radio"/>

                    <br/><br/>

                    地址：
                    <select value={this.state.city} onChange={this.changeCity}>
                        {this.state.cities.map((val, key) => {
                            return <option key={key}>{val}</option>
                        })}
                    </select>

                    <br/><br/>

                    爱好：
                    {this.state.hobbies.map((val, key) => {
                        return (
                            <span key={key}>
                                {val.title}
                                <input checked={val.checked} onChange={this.changeHobbies.bind(this, key)} type="checkbox"/>
                            </span>
                        )
                    })}

                    <br/><br/>

                    简介：
                    <textarea value={this.info} onChange={this.changeInfo}></textarea>
                    <br/><br/>

                    <input value="提交" type="submit"/>
                </form>

            </div>
        );
    }
}

export default Home;

之前我们已经介绍过了表单在 React 的一些基本信息，上面的代码比较详细的介绍了一下不同表单获取信息的方式。

下面是不同表单的不同处理方式：

1、text：

用 value 绑定 this.state 中的数据，然后通过 onChange 事件获取 changeName 方法，在 event 事件中获取 input 的值并赋值给 this.state

2、radio：

性别只能选择一个，所以 this.state.sex 默认值为 1 ，表示男，value 值分别绑定为 1 和 2，通过 checked 属性来判断哪个被选中，通过 onChange 事件将默认的 value 值赋值给 this.state.sex，checked 属性就能来判断被选中的值了。

3、select：

select 跟正常的 HTML 有所不同，它的 value 值绑定在 select 上，然后通过 onChange 事件获取选中的值，并将该值赋值给另一个变量来存储所选的值。

4、checkbox：

checkbox 为一个数组，可以选择多个值，在 this.state 的每个值中再添加一个属性 checked，选中为 true，没选中为 false，当点击某一个时，将所选中的值通过 onChange 事件传给 changeHobbies，然后通过该值找到 this.state 列表中的位置，将 checked 属性值去反即可来控制选中和取消选中。

5、textarea：

textarea 和 text 的获取值方法是一样的，通过 value 绑定 this.state 中的值，通过 onChange 事件来获取 textarea 框内的值并赋给 this.state。

 

这样就实现了 form 表单中的值的双向数据绑定，可以通过在 form 上添加 onSubmit 事件，取消默认触发事件来获取 form 表单内的值。

最后运行结果为：