Skip to content

React 表单知识点

表单控件等

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

非受控组件

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

受控组件

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

js
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;

基于 MIT 许可发布