表单处理

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

相关推荐