表單控件

1.表單控件的操做

1.數據雙向綁定

demo1: 在輸入框中輸入或者刪除數據時，能夠實時監控。

class App extends React.Component {
    state = {
        val : ""
    }
    handleChange = (e) => {
        this.setState({
            val : e.target.value
        })
    }
    render(){
        return (
            <div>
                <h1>form</h1>
                <input 
                    type="text" 
                    value={this.state.val} 
                    onChange={this.handleChange}
                />
                <b>{this.state.val}</b>
            </div>
        )
    }
}
ReactDOM.render(
    <App></App>,
    document.getElementById("app")
)
複製代碼

初始效果：

當在輸入框中輸入數據時，在旁邊會出現相同文字:

1. 非受控(非約束性)表單控件: 用戶輸入的值獲取不到
2. 受控(約束性)表單控件: 讓react管理表單的數據，可以監視數據的改變

---

2.onSubmit事件，當表單提交時會觸發的事件

demo2:單選框，下拉列表，多選框，文本域的一些操做

class App extends React.Component {
    state = {
        user : "",
        sex : "",
        cityList : ["上海","江蘇","浙江"],
        city : "" ,
        like : [
            {
                title: "籃球",
                checked: true
            },
            {
                title: "足球",
                checked: false
            },
            {
                title: "乒乓球",
                checked: false
            }
        ],
        textArea : ""
    }
    //提交數據
    handleSubmit = (e) => {
       e.preventDefault();  //阻止默認事件
       console.log("用戶名",this.state.user);
       console.log("性別",this.state.sex);
       console.log("城市",this.state.city);
       console.log("愛好",this.state.like);
       console.log("介紹",this.state.textArea);
    }
    //更新用戶名
    handleUser = (e) => {
        this.setState({
            user : e.target.value
        })
    }
    //更新單選框
    handleSex = (e) => {
        this.setState({
            sex : e.target.value
        })
    }
    //更新下拉菜單
    handleSelect = (e) => {
        this.setState({
            city : e.target.value
        })
    }
    //更新多選框
    handleLike = (i) => {
        const like = this.state.like;
        like[i].checked = !like[i].checked
        this.setState({
             like
        })
    }
    //處理文本域
    handleText = (e) => {
        this.setState({
            textArea : e.target.value
        })
    }
    render(){
        return (
            <div>
                <h1>form</h1>
                <br/>
                <form onSubmit={this.handleSubmit}>
                    用戶名：<input type="text" value={this.state.user} onChange={this.handleUser}/>
                    <br/>
                    <br/>
                    性別:  
                        <input type="radio" value={"0"} checked={this.state.sex === "0"} onChange={this.handleSex} /> 男
                        <input type="radio" value={"1"} checked={this.state.sex === "1"} onChange={this.handleSex} /> 女
                    <br/>
                    <br/> 
                    城市：
                    {
                        this.state.cityList.length>0 && (
                                    <select value={this.state.city} onChange={this.handleSelect}>
                                {
                                    this.state.cityList.length>0 && this.state.cityList.map((item, index) => {
                                        return(
                                            <option key={index}>{item}</option>
                                        )
                                    })
                                }
                            </select>
                        )
                    }
                    <br/>
                    愛好：
                        {
                            this.state.like.length>0 && this.state.like.map((item, index) => {
                                return (
                                    <div key={index}>
                                        <input  
                                            type={"checkbox"}
                                            checked={item.checked}
                                            onChange={this.handleLike.bind(this, index)}
                                        />
                                        {item.title}
                                    </div>
                                )
                            })
                        }
                    <br/>
                    <textarea value={this.state.textArea} onChange={this.handleText} cols={"30"} ></textarea>
                    <br/>
                    <br/>
                    <input type="submit" value={"提交"}/> 
                </form> 
            </div>
        )
    }
}
ReactDOM.render(
    <App></App>,
    document.getElementById("app")
)
複製代碼

效果圖,將傳遞給後臺的數據打印出來：