React表单处理中的受控组件和非受控组件

React表单处理中的受控组件和非受控组件

1.受控组件

1.HTML中的表单元素是可输入的,也就是有自己的可变状态;

2.React中可变状态通常保存在state中,并且只能通过setState()方法来修改;

3.React将state与表单元素值value绑定到一起,由state的值来控制表单元素的值;

4.受控组件:其值受到React控制的表单元素;

5.受控组件有文本框,富文本框,下拉框操作value属性,复选框操作checked属性;

//1.在state中添加一个状态,作为表单元素的value值(控制表单元素值的来源)
//2.给表单元素绑定change事件,将表单元素的值设置为state的值(控制表单元素值的变化)
state={txt:''}

<input type="text" value={this.state.txt}
onChange={e => this.setState({ txt: e.target.value })}
/>

demo

/* 
  受控组件示例
*/

class App extends React.Component {
  state = {
    txt: '',
    content: '',
    city: 'bj',
    isChecked: false
  }

  handleForm = e => {
    // 获取当前DOM对象
    const target = e.target

    // 根据类型获取值
    const value = target.type === 'checkbox'
      ? target.checked
      : target.value

    // 获取name
    const name = target.name

    this.setState({
      [name]: value
    })
  }

  render() {
    return (
      <div>
        {/* 文本框 */}
        <input type="text" name="txt" value={this.state.txt} onChange={this.handleForm} />
        <br/>

        {/* 富文本框 */}
        <textarea name="content" value={this.state.content} onChange={this.handleForm}></textarea>
        <br/>

        {/* 下拉框 */}
        <select name="city" value={this.state.city} onChange={this.handleForm}>
          <option value="sh">上海</option>
          <option value="bj">北京</option>
          <option value="gz">广州</option>
        </select>
        <br/>

        {/* 复选框 */}
        <input type="checkbox" name="isChecked" checked={this.state.isChecked} onChange={this.handleForm} />
      </div>
    )
  }
}

2.非受控组件

1.借助于ref,使用原生DOM方式来获取表单元素值

2.ref的作用:获取DOM或组件

class App extends React.Component {
    constructor () {
        super()
        //调用React.createRef()方法创建一个ref对象
        this.txtRef = React.createRef()
    }
    // 事件处理函数
    getTxt = () => {
        //通过ref对象以获取到文本框中的值
        console.log('文本框的值为:',this.txtRef.current.value)
    }

    render() {
        return (
            <div>
            	//通过创建好的ref对象添加到文本框中
                <input type="text" ref={this.txtRef}/>
                <button onClick={this.getTxt}>获取文本框的值</button>
            </div>
        )
    }
}