表单处理

1.受控组件

　　HTML中的表单元素是可输入的，也就是有自己的可变状态

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

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

　　受控组件：其值受到React控制的表单元素

步骤：

　　1. 在state中添加一个状态，作为表单元素的value值(控制表单元素值的来源)　

　　2. 给表单元素绑定change事件，将表单元素的值设置为state的值(控制表单元素值的变化)

//1. 导入react
import React from 'react';
import ReactDOM from 'react-dom';


/*
  受控组件：其值受到React控制的表单元素





  操作文本框的值：
*/





class App extends React.Component {
  state = {
      txt: ''
    }





  handleChange = e => {
    this.setState({
      txt: e.target.value
    })
  }





  render () {
    return (
      <div>
        <input type="text" value={this.state.txt} onChange={this.handleChange} />
      </div>
    )
  }
}





//渲染组件
ReactDOM.render(<App />, document.getElementById('root'))

 总结：

　　1. 文本框、富文本框、下拉框 操作value属性

　　2. 复选框 操作checked属性

//1. 导入react
import React from 'react';
import ReactDOM from 'react-dom';

/*
  受控组件：其值受到React控制的表单元素

  操作文本框的值：
*/

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

  handleChange = e => {
    this.setState({
      txt: e.target.value
    })
  }

  // 处理富文本框的变化
  handleContent = e => {
    this.setState({
      content: e.target.value
    })
  }

  //处理下拉框的变化
  handleCity = e => {
    this.setState({
      city: e.target.value
    })
  }

  //处理复选框的变化
  handleChecked = e => {
    this.setState({
      isChecked: e.target.checked
    })
  }


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

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

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

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

//渲染组件
ReactDOM.render(<App />, document.getElementById('root'))

 2. 非受控组件

　　使用步骤：

　　　　1. 调用React.createRef() 方法创建一个ref对象

 

　　　　2. 将创建好的ref对象添加到文本框中

　　　　3.通过ref对象获取到文本框的值

//1. 导入react
import React from 'react';
import ReactDOM from 'react-dom';

/*
  非受控组件：
*/

class App 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} />

        <button onClick={this.getTxt}>获取文本框的值</button>
      </div>
    )
  }
}

//渲染组件
ReactDOM.render(<App />, document.getElementById('root'))