React中綁定文本框與state中的值

在React中，默認只是單項數據流，也就是只能把state上的數據綁定到頁面上，但無法把頁面中數據的變化自動同步回state中。如果需要把頁面上的數據的變化保存到state中，需要程序員手動監聽onChange事件，拿到最新的數據，手動調用this.setState({ })更改回去。

 

 例如：

import React from 'react';

export default class BindInputValue extends React.Component{
    constructor(){
        super();
        //私有數據
        this.state = {
            msg: '哈哈',
            name: '張三',
            age: 22,
            gender: '男'
        }
    }

    render(){
        return <div>
            {/* 注意：onClick只接收function作為處理函數 */}
            <button onClick={()=>{this.myclickHandler()}}>按鈕</button>
            {/* 點擊按鈕修改msg的值 */}
            <h3>{this.state.msg}</h3>
            {/* 如果我們只是把文本框的value屬性綁定到了state狀態，如果不提供onChange處理函數的話，得到的文本框將會是一個只讀的文本框 */}
            {/* 當為文本框綁定value值以后，要么同時提供一個readOnly,要么提供一個onChange處理函數 */}
            {/* <input type="text" style={{width: '100%'}} value={this.state.msg} readOnly /> */}
            <input type="text" style={{width: '100%'}} value={this.state.msg} onChange={(e)=>{this.txtChange(e)}} ref="txt" />
        </div>
    }

    //每當文本框的內容變化了，必然會調用這個txtChange
    txtChange = (e) => {
        console.log('文本框的內容變化了');
        //在onChange事件中獲取文本框的值有兩種方案
        //方案1：通過事件參數e來獲取
        console.log(e.target.value);
        const newmsg = e.target.value;
        //將文本框狀態同步到this.state屬性中去
        this.setState({
            msg: newmsg
        });

        //方案2：通過ref屬性來獲取
        console.log(this.refs.txt.value);
    }

    //這是一個實例方法
    myclickHandler = () => {
        console.log(this);
        //注意1：在React中，如果想為state中的數據重新賦值，不要使用this.state.*** = ***
        //應該調用React中提供的this.setState({msg: '***'})
        //this.state.msg = 'ooooooooooo';

        //在setState中只會把對應的state狀態更新，而不會覆蓋其他的state狀態
        this.setState({
            msg: '123'
        },function(){  //回調函數
            console.log(this.state.msg);
        })

        //注意2：this.setState方法的執行是異步的，如果在調用完this.setState之后想要立即拿到最新的state值，需要使用this.setState({},callback)       
        //console.log(this.state.msg);
    }
}