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')
    )