React入门-7.表单

React表单

表单是前后台数据交互非常重要的一种机制。一般，前端开发者需要从表单中接收用户输入，然后整理数据发送给后台开发者。那么，如何快速准确获取用户输入呢？VUE采用双向数据绑定，即表单项的值与模型中的对象绑定，一方改变另外一方也跟着改变。react要稍微复杂一些。

前面我们说过，组件中的数据一般是维护在state中的。那么，表单的值也应该功能维护在state中。那么如果维护呢？ 可以将state中的值绑定到表单项中，然后为表单项绑定onChange事件，每次修改表单项的数据的时候该事件处理函数都会执行，这时候我们可以调用setState方法将表单项中的值再次设置到state中，由于state中对应的值改变，页面会执行重新渲染，最新的值也就渲染在页面上了。

不同的表单项绑定不同。

    class MyForm extends React.Component{
      constructor(props){
        super(props);
        this.state = {
          username:'',
          password:'',
          gender:'男',
          address:'山西',
          description:''
        };
      }
      handleSubmit=(event)=>{
        console.log(this.state);
        event.preventDefault();
      }
        
      // 每当表单元素状态改变的时候将表单元素中的值关联到state中。进而渲染到页面
      handleChange=(event)=>{
        let name = event.target.name;
        let value = event.target.value;
        this.setState((state)=>({
            [name]:value
        }))
      }

      render(){
        return (
          <form onSubmit={this.handleSubmit}>
            {JSON.stringify(this.state)} 
            <hr/>
            用户名: 
            <input 
              type="text" 
              name="username" 
              value={this.state.username} 
              onChange={this.handleChange}/> <br/>
            密码: 
            <input 
              type="password" 
              name="password" 
              value={this.state.password}
              onChange={this.handleChange}/><br/>
            性别：
            <label>
              <input 
                type="radio" 
                name="gender" 
                value="男"
                onChange={this.handleChange} 
                checked={this.state.gender=="男"?true:false}/>男
            </label>
            <label>
              <input 
                type="radio" 
                name="gender" 
                value="女"
                onChange={this.handleChange}  
                checked={this.state.gender=="女"?true:false}/>女
            </label><br/>
            地址:
            <select name="address" 
              value={this.state.address} 
              onChange={this.handleChange}>
              <option value="江苏">江苏</option>
              <option value="山西">山西</option>
              <option value="河南">河南</option>
              <option value="陕西">陕西</option>
            </select>  <br/>
            介绍：
            <textarea 
              name="description"
              value={this.state.description} 
              onChange={this.handleChange}></textarea> <br/>
            <input type="submit" value="保存"/> 
          </form>
        )
      }
    }
    ReactDOM.render(
      <MyForm></MyForm>,
      document.getElementById('app')
    )