React表单处理

1.受控组件

• HTML中的表单元素是可以输入的，也就是有自己的可变状态
• 但是，React中可改变状态通常保存在state中，并且只能通过setState（）方法来改变
• React将state与表单元素值value绑定到一块，由state的值来控制表单元素的值

 class Hi extends React.Component{
     state={
      count:0,
      txt:"表单处理",
      context:'today is a nice day',
      country:'china',
      isCheck:true
     }
      handerClick=()=>{
        this.setState({
          count:this.state.count+1
        })
      }

      handerTextarea=(e)=>{
        this.setState({
          context:e.target.value
        })
      }

      // 下拉框
      handerCountry=(e)=>{
        this.setState({
          country:e.target.value
        })
      }

      //复选框
      handerCheck=(e)=>{
        this.setState({
          isCheck:e.target.checked
        })
      }
      render(){
        return(
          <div>有状态组件{this.state.count}
             <button onClick={this.handerClick}>+1</button>
             {/* onChange函数用大括号 */}
             {/* this.setState({})是有小括号的 */}
             <input type="text" value={this.state.txt} onChange={e => this.setState({txt:e.target.value})}></input>
             {/* 富文本框 */}
             <textarea value={this.state.context} onChange={this.handerTextarea}></textarea>

             {/* 下拉框 */}
             <select value={this.state.country} onChange={this.handerCountry}>
              <option value='chian'>China</option>
              <option value='english'>England</option>
              <option value='japan'>Japan</option>
             </select>
             <p>{this.state.country}</p>

             {/* 复选框 */}
             <input type='checkbox' checked={this.state.isCheck} onChange={this.handerCheck} ></input>
             <p>{this.state.isCheck}</p>
          </div>
        )
      }
     }
     ReactDOM.render(<Hi></Hi>,document.getElementById('root'))

1.2多表单元素优化步骤
原因：一个一个绑定太麻烦

 class Hi extends React.Component{
     state={
      count:0,
      txt:"表单处理",
      context:'today is a nice day',
      country:'China',
      isCheck:true
     }
      handerClick=()=>{
        this.setState({
          count:this.state.count+1
        })
      }

     handerChange=(e)=>{
      //获取当前DOM对象
      var target = e.target

      //根据表单元素类型获取值
      var value = target.type==='checkbox'
      ? target.checked
      :target.value
     

      var name = target.name

      //根据name设置对应的state
      this.setState({
        [name]:value
      })
     }
      render(){
        return(
          <div>有状态组件{this.state.count}
             <button onClick={this.handerClick}>+1</button>
             {/* onChange函数用大括号 */}
             {/* this.setState({})是有小括号的 */}
             <input type="text" name='txt' value={this.state.txt} onChange={e => this.setState({txt:e.target.value})}></input>
             {/* 富文本框 */}
             <textarea name='context' value={this.state.context} onChange={this.handerChange}></textarea>

             {/* 下拉框 */}
             <select name="country" value={this.state.country} onChange={this.handerChange}>
              <option value='chian'>China</option>
              <option value='english'>England</option>
              <option value='japan'>Japan</option>
             </select>
             <p>{this.state.country}</p>

             {/* 复选框 */}
             <input type='checkbox' name='isCheck' checked={this.state.isCheck} onChange={this.handerChange} ></input>
             <p>{this.state.isCheck}</p>
          </div>
        )
      }
     }
     ReactDOM.render(<Hi></Hi>,document.getElementById('root'))

1.3非受控组件

• 说明：借助与ref，使用原生DOM方式来获取表单元素值
• ref作用：获取DOM或组件

  class Hi extends React.Component{
      constructor(){
        super()
        //创建Ref
        this.txtRef = React.createRef()
      }

    //获取文本框的值
    getTxt=()=>{
        console.log(this.txtRef.current.value)
    }
    render(){
        return(
            <div>
                <input type='text' ref={this.txtRef}></input>
                <button onClick={this.getTxt}>获取文本框的值</button>
            </div>
        )
            
    }
}
    ReactDOM.render(<Hi></Hi>,document.getElementById('root'))