【React学习】React如何同步获取表单中的值？

React中的表单没有双向绑定，因此如何根据用户的输入，同步获取表单中的值，是一个问题。

我们知道，在React中，所有可变的东西都由状态来管理，但是表单中的值不在状态里，所以我们可以利用onchange事件的事件对象，拿到输入表单的值，再把表单的值赋给状态，这样就可以同步获取表单中的值了。

<div id="app"></div>    

<script type="text/babel">

    class Demo extends React.Component{
        constructor(){
            super();
            this.state={
                value:"",
                value:""
            }
        }
        // 通过事件对象e，获取表单的值
        handleChange=(e)=>{
            const name = e.target.name
            let key=name=="username"?"value":"value2"
            this.setState({
                [key]:e.target.value
            })
        }
        // 渲染函数
        render(){
            return(
                <div>
                    <input type="text" value={this.state.value} name="username" onChange={this.handleChange}/>
                    <h1>{this.state.value}</h1>
                    <input type="text" value={this.state.value2} name="password" onChange={this.handleChange}/>
                    <h1>{this.state.value2}</h1>
                </div>
            )
        }
    }
    
    ReactDOM.render(
        <Demo/>,
        document.getElementById("app")
    )

</script>

效果