React 表单：受控和不受控组件-JavaScript中文网-JavaScript教程资源分享门户

React是一个流行的JavaScript库，可以用于构建响应式，高效的用户界面。React的表单组件使开发者可以轻松构建交互性的表单。本文将介绍React表单组件中的受控和不受控组件，并提供有用的示例代码。

什么是受控组件？

在React中，受控组件是指表单元素的值由React组件的状态进行控制。换句话说，表单元素的值由setState()方法进行更新，而不是原生DOM API。

受控组件的好处是可以让React组件和表单元素之间的值保持同步。当用户在表单元素中输入一些内容，React组件可以很容易地更新相应的状态，并重新渲染组件，以便反映用户的更改。

下面是一个示例代码，说明如何创建一个受控组件:

// javascriptcn.com 代码示例
import React, { Component } from 'react';

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

  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>
    );
  }
}

在上述代码中，我们定义了一个名为ControlledForm的类组件，该组件包含一个文本输入框和一个提交按钮。文本输入框的value属性受到了来自组件状态的控制，而且该组件还包含了两个方法handleChange和handleSubmit。handleChange方法将输入框的值更新到组件状态中，而handleSubmit方法将此值用于提交表单后的后续处理。

什么是不受控组件？

在React中，不受控组件是指表单元素的值由DOM本身进行控制。换句话说，表单元素的值不受React组件的状态控制。

不受控组件通常适用于不需要组件渲染期间进行变更的情况。通常，这是因为开发者需要在组件之外访问表单中的值。

下面是一个示例代码，说明如何创建一个不受控组件:

// javascriptcn.com 代码示例
import React, { Component } from 'react';

class UncontrolledForm extends Component {
  handleSubmit = (event) => {
    alert('A name was submitted: ' + this.input.value);
    event.preventDefault();
  }

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

在上述代码中，我们定义了一个名为UncontrolledForm的类组件，该组件包含一个文本输入框和一个提交按钮。与先前的示例不同，文本输入框的value属性设置为defaultValue，而不是从组件状态获取。此时，我们需要使用ref属性来访问该输入框的原生DOM元素。

如何选择使用受控组件或不受控组件？

受控组件和不受控组件各自有其适用的场景。理解这两者之间的差异并知道何时使用它们是非常重要的。

通常，在表单数据需要被更新时使用受控组件，因为它们允许React组件反映数据变化并自动更新渲染。而在需要与非React代码集成的情况下使用不受控组件。

总的来说，如果需要访问表单中的数据或者集成第三方库，那么就使用不受控组件。如果表单变化需要反映到React组件中，那么使用受控组件。

总结

React表单组件中的受控和不受控组件各有优缺点。选择何种类型的组件取决于应用程序的需求。本文提供了包含示例代码的深入指导，希望能解决React表单组件中可能遇到的问题。

来源：JavaScript中文网，转载请注明来源本文地址：https://www.javascriptcn.com/post/653fc1aa7d4982a6eb951270