<react學習筆記(9)>表單控制元件

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")
)
複製程式碼

效果圖,將傳遞給後臺的資料列印出來：