React 之form表單、select、textarea、checkbox使用

1、案例如下

import React from 'react';

/**
 * 非約束性組(類似defaultValue等屬性，不可以程序修改):
         <input type="text" defaultValue="a" />   這個 defaultValue 其實就是原生DOM中的 value 屬性。
         這樣寫出的來的組件，其value值就是用戶輸入的內容，React完全不管理輸入的過程。

 約束性組件(可以修改屬性值)：
         <input value={this.state.username} type="text" onChange={this.handleUsername}  />
         這里，value屬性不再是一個寫死的值，他是 this.state.username, this.state.username 是由 this.handleChange 負責管理的。
         這個時候實際上 input 的 value 根本不是用戶輸入的內容。而是onChange 事件觸發之后，由於 this.setState 導致了一次重新渲染。
         不過React會優化這個渲染過程。看上去有點類似雙向數據綁定
 */
class Home6 extends React.Component{
    constructor(props){
        super(props);
        this.state = {

            msg:"react表單",
            name:'楊文傑',
            sex:'1',
            city:'',
            citys:[

                '北京','上海','深圳'
            ],
            hobby:[
                {
                    'title':"睡覺",
                    'checked':true
                },
                {
                    'title':"吃飯",
                    'checked':false
                },
                {
                    'title':"敲代碼",
                    'checked':true
                }
            ],
            info:''

        };
    }

    /**
     * 獲取用戶名
     * @param e
     */
    handelSubmit=(e)=>{
        //阻止submit的提交事件
        e.preventDefault();
        console.log(this.state.name,this.state.city);
    }
    handelName=(e)=>{
        this.setState({
            name:e.target.value
        })
    }
    /**
     * 男女單項選擇
     * @param e
     */
    changeSex=(e)=>{
        this.setState({
            sex:e.target.value
        })

    }
    /**
     * 獲取select中的城市
     */
    getCity=(e)=>{
        this.setState({
            city:e.target.value
        })
    }

    /**
     * 注意：愛好有多個值
     * @param e
     */
    changeHobby(key){
        var hobby = this.state.hobby;
        hobby[key].checked=!hobby[key].checked;
        this.setState({
            hobby:hobby
        })
    }

    handleInfo=(e)=>{
        this.setState({
            info:e.target.value
        })
    }
    render() {
        return(
            <div>
                這是HOME6組件
                <br/>
                {this.state.msg}
                <p>for表單獲取值</p>
                <form onSubmit={this.handelSubmit}>
                    用戶名:<input type="text" value={this.state.name} onChange={this.handelName}/>
                    <input type="radio" value="1" checked={this.state.sex==1} onChange={this.changeSex}/>男
                    <input type="radio" value="2" checked={this.state.sex==2} onChange={this.changeSex}/>女 <br/>
                    <input type="submit" defaultValue="提交"/>
                    <br/>
                    居住城市:
                    <select value={this.state.city} onChange={this.getCity}>
                        {
                            this.state.citys.map(function (value,key) {
                               return <option key={key}>{value}</option>
                            })
                        }
                    </select>
                    <br/>
                    愛好:
                    {   //注意key值指向
                        this.state.hobby.map( (value,key)=>{
                            return (<span key={key}>
                                        <input type="checkbox" checked={value.checked} onChange={this.changeHobby.bind(this,key)}/>{value.title}
                                     </span>)
                        })
                    }
                    <br/>
                    評論區:
                    <textarea value={this.state.info} onChange={this.handleInfo}>

                    </textarea>

                </form>
            </div>
        )
    }
}
export default Home6;