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 表單內的值。

最後執行結果為：