React 表单知识点

表单控件等

• 受控组件
• input textarea select 用 value
• checkbox radio 用 checked

非受控组件

非受控组件，即组件的状态不受 React 控制的组件

受控组件

同样的，受控组件就是组件的状态受 React 控制。上面提到过，既然通过设置 input 的 value 属性, 无法改变输入框值,那么我们把它和 state 结合在一起,再绑定 onChange 事件,实时更新 value 值就行了。

import React from "react";

class FormDemo extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      name: 'lzw.',
      info: '个人信息',
      city: 'changsha',
      flag: true,
      gender: 'male'
    }
  }

  render() {
    // 受控组件，类似 v-model（state.name 受到 input 事件控制改变值）
    // return <div>
    //   <p>{this.state.name}</p>
    //   {/*用 htmlFor 代替 for*/}
    //   <label htmlFor="inputName">姓名：</label>
    //   <input id="inputName" value={this.state.name} onChange={this.onInputChange}/>
    // </div>

    // textarea - 使用 value
    // return <div>
    //   <textarea value={this.state.info} onChange={this.onTextareaChange}></textarea>
    //   <p>{this.state.info}</p>
    // </div>

    // select - 使用 value
    // return <div>
    //   <select value={this.state.city} onChange={this.onSelectChange}>
    //     <option value="beijing">北京</option>
    //     <option value="shanghai">上海</option>
    //     <option value="shenzhen">深圳</option>
    //   </select>
    //   <p>{this.state.city}</p>
    // </div>

    // checkbox
    // return <div>
    //   <input type="checkbox" checked={this.state.flag} onChange={this.onCheckboxChange}/>
    //   <p>{this.state.flag.toString()}</p>
    // </div>

    // radio
    return <div>
      <input type="radio" value="male" checked={this.state.gender === 'male'} onChange={this.onRadioChange}/>
      <input type="radio" value="female" checked={this.state.gender === 'female'} onChange={this.onRadioChange}/>
      <p>{this.state.gender}</p>
    </div>
  }

  onInputChange = (e) => {
    this.setState({
      name: e.target.value
    })
  }

  onTextareaChange = (e) => {
    this.setState({
      info: e.target.value
    })
  }

  onSelectChange = (e) => {
    this.setState({
      city: e.target.value
    })
  }
  onCheckboxChange = (e) => {
    this.setState({
      flag: !this.state.flag
    })
  }

  onRadioChange = (e) => {
    this.setState({
      gender: e.target.value
    })
  }
}

export default FormDemo