初学react之收集表单数据

今天记录一下表单数据的收集，我就讲一下经常用的最值得推荐的一种用法，如果想知道其它用法，请自行google

受控组件形式收集：（受控也就是要使用到状态state）

其中两点很重要：1.在Input框里面绑定value值为this.state.username

                             2.利用onChange事件对输入的数据保存更新到state里面去

利用这种方法有很多好处，比如：一个组件很复杂，如果后期要使用表单里面的数据，直接const username=this.state就可以了。

例：

    class Input extends React.Component{
        constructor(props){
            super(props)
            this.state={
                username:"",
                password:""
            }
            this.handleChangename=this.handleChangename.bind(this);
            this.handleChangepwd=this.handleChangepwd.bind(this);
            this.up=this.up.bind(this);
        }
        handleChangename(event){
            // 读取输入的值
          const username=event.target.value;
           //   更新状态
          this.setState({username})
        }
        handleChangepwd(event){
            const password=event.target.value;
            this.setState({password})
        }
        up(){
            console.log(this.state)
        }

        render(){
            return (
                <div>
                    姓名：<input value={this.state.username} onChange={this.handleChangename}/>
                    密码：<input type='password' value={this.state.password} onChange={this.handleChangepwd}/>
                   <input type='submit' value="登录" onClick={this.up}/>
                </div>
            )
        }
    }

 当你有处理多个受控的input元素时，你可以通过给每个元素添加一个name属性，来让处理函数根据 event.target.name的值来选择做什么

所以上述代码还可以化简为这样：

class Input extends React.Component{
        constructor(props){
            super(props)
            this.state={
                username:"",
                password:""
            }
            this.handleChange=this.handleChange.bind(this);
            this.up=this.up.bind(this);
        }
        handleChange(event){
            // 读取输入的值
          const name=event.target.name;
          const value=event.target.value;
          //   更新状态
          this.setState({
              [name]:value
          })
        }
        up(){
            console.log(this.state)
        }

        render(){
            return (
                <div>
                    姓名：<input name="username" value={this.state.username} onChange={this.handleChange}/>
                    密码：<input name="password" type='password' value={this.state.password} onChange={this.handleChange}/>
                   <input type='submit' value="登录" onClick={this.up}/>
                </div>
            )
        }
    }
    
    ReactDOM.render(<Input />,document.getElementById('test'))