React-----form（表单）

最新推荐文章于 2025-08-30 18:15:00 发布

原创最新推荐文章于 2025-08-30 18:15:00 发布 · 488 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#React #event #表单 #form #ES6

React 专栏收录该内容

13 篇文章

订阅专栏

本文详细介绍了React中的表单实现方式，对比了与HTML表单的不同之处，并深入探讨了输入框、文本域、选择框等组件的使用方法及事件处理。

概述：

React表单和html表单的区别就是，前者分工明确，后者html似乎夹杂着其它功能（本来觉得有js处理的提交功能）

1.html下表单

<form>
  <label>
    Name:
    <input type="text" name="name" />
  </label>
  <input type="submit" value="Submit" />
</form>

2.React的表单

class NameForm extends React.Component {
  constructor(props) {
    super(props);
    this.state = {value: ''};

    this.handleChange = this.handleChange.bind(this);
    this.handleSubmit = this.handleSubmit.bind(this);
  }

  handleChange(event) {
    this.setState({value: event.target.value});
  }

  handleSubmit(event) {
    alert('A name was submitted: ' + this.state.value);
    event.preventDefault();
  }

  render() {
    return (
      <form onSubmit={this.handleSubmit}>
        <label>
          Name:
          <input type="text" value={this.state.value} onChange={this.handleChange} />
        </label>
        <input type="submit" value="Submit" />
      </form>
    );
  }
}

总结：1.咋一看，React写代码多了，比直接html更复杂，其实它的分工更加明确了。

2.React面向对象编程思想，这个表单就可以是一个单独对象，可以独立使用渲染，

3.React的html和js在内部分开，而对外是一个整体，达到封装的效果。

4.handleChange(event),由于全局绑定this，所以它应该拥有event事件对象，event.target.value表示输入的值

3.textarea(文本域)

class EssayForm extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      value: 'Please write an essay about your favorite DOM element.'
    };

    this.handleChange = this.handleChange.bind(this);
    this.handleSubmit = this.handleSubmit.bind(this);
  }

  handleChange(event) {
    this.setState({value: event.target.value});
  }

  handleSubmit(event) {
    alert('An essay was submitted: ' + this.state.value);
    event.preventDefault();
  }

  render() {
    return (
      <form onSubmit={this.handleSubmit}>
        <label>
          Name:
          <textarea value={this.state.value} onChange={this.handleChange} />
        </label>
        <input type="submit" value="Submit" />
      </form>
    );
  }}

这文本域跟input输入框语法是一样的，只是它有初始值，也就是构造函数初始化value的值，可以通过this.state.value获得。

4.select标签：

html下格式

<select>
  <option value="grapefruit">Grapefruit</option>
  <option value="lime">Lime</option>
  <option selected value="coconut">Coconut</option>
  <option value="mango">Mango</option>
</select>

react下格式

class FlavorForm extends React.Component {
  constructor(props) {
    super(props);
    this.state = {value: 'coconut'};

    this.handleChange = this.handleChange.bind(this);
    this.handleSubmit = this.handleSubmit.bind(this);
  }

  handleChange(event) {
    this.setState({value: event.target.value});
  }

  handleSubmit(event) {
    alert('Your favorite flavor is: ' + this.state.value);
    event.preventDefault();
  }

  render() {
    return (
      <form onSubmit={this.handleSubmit}>
        <label>
          Pick your favorite La Croix flavor:
          <select value={this.state.value} onChange={this.handleChange}>
            <option value="grapefruit">Grapefruit</option>
            <option value="lime">Lime</option>
            <option value="coconut">Coconut</option>
            <option value="mango">Mango</option>
          </select>
        </label>
        <input type="submit" value="Submit" />
      </form>
    );
  }
}

总结：

1.在html中对于选择一个标签我们会使用selected属性，而在React中直接在Select设置value属性来设置定属性值，React的value可以在初始化的时候设置

2.React分工明确，后期维护html显得有点乱，因为初始值都是设置死值

5.如何在一个处理函数处理多种输入标签

class Reservation extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      isGoing: true,
      numberOfGuests: 2
    };

    this.handleInputChange = this.handleInputChange.bind(this);
  }

  handleInputChange(event) {
    const target = event.target;
    const value = target.type === 'checkbox' ? target.checked : target.value;
    const name = target.name;

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

  render() {
    return (
      <form>
        <label>
          Is going:
          <input
            name="isGoing"
            type="checkbox"
            checked={this.state.isGoing}
            onChange={this.handleInputChange} />
        </label>
        <br />
        <label>
          Number of guests:
          <input
            name="numberOfGuests"
            type="number"
            value={this.state.numberOfGuests}
            onChange={this.handleInputChange} />
        </label>
      </form>
    );
  }
}

ReactDOM.render(
  <Reservation />,
  document.getElementById('root')
);

总结：1、一个复选框和数字框都绑定了handleInputChange,它们怎么区分呢？本质上就是类型不一样，通过触发事件的类型进行区分

2、 event.target.type目标事件类型， event.target.name目标事件的名称。

3、注意[name] 在设置状态的引用的引用name的值，这是ES6的语法，它等同于如下

var partialState = {};
partialState[name] = value;
this.setState(partialState);

总结：总体来说React表单就是html+js形成一个对象，在内部处理分工明确。