React Component Changing Uncontrolled Input 报错如何解决

在 React 开发中，处理表单输入是一个常见的任务。然而，有时你可能会遇到一个令人困惑的错误：“A component is changing an uncontrolled input to be controlled.” 这个错误通常发生在你尝试将一个未受控的输入（uncontrolled input）转换为受控的输入（controlled input）时。本文将详细解释这个错误的原因，并提供多种解决方案来帮助你解决这个问题。

1. 什么是受控组件和未受控组件？

在 React 中，表单输入可以分为两种类型：受控组件（Controlled Components）和未受控组件（Uncontrolled Components）。

1.1 受控组件

受控组件是指那些由 React 状态（state）控制的表单输入。在受控组件中，输入的值由 React 组件的 state 管理，并且通过 onChange 事件处理程序来更新状态。例如：

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

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

  render() {
    return (
      <input
        type="text"
        value={this.state.value}
        onChange={this.handleChange}
      />
    );
  }
}

在这个例子中，input 的值由 this.state.value 控制，每次输入时都会调用 handleChange 方法来更新状态。

1.2 未受控组件

未受控组件是指那些由 DOM 自身管理的表单输入。在未受控组件中，输入的值不由 React 状态管理，而是由 DOM 节点直接管理。你可以通过 ref 来访问 DOM 节点的值。例如：

class UncontrolledInput extends React.Component {
  constructor(props) {
    super(props);
    this.inputRef = React.createRef();
  }

  handleSubmit = (event) => {
    event.preventDefault();
    alert('A name was submitted: ' + this.inputRef.current.value);
  };

  render() {
    return (
      <form onSubmit={this.handleSubmit}>
        <input type="text" ref={this.inputRef} />
        <button type="submit">Submit</button>
      </form>
    );
  }
}

在这个例子中，input 的值由 DOM 节点直接管理，React 不参与管理输入的值。

2. 为什么会出现 “A component is changing an uncontrolled input to be controlled” 错误？

这个错误通常发生在以下情况下：

• 你最初将输入设置为未受控组件（即没有提供 value 属性），但随后又尝试将其转换为受控组件（即提供了 value 属性）。
• 你最初将输入设置为受控组件（即提供了 value 属性），但随后又尝试将其转换为未受控组件（即移除了 value 属性）。

React 会检测到这种不一致的行为，并抛出警告或错误。

2.1 示例

考虑以下代码：

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

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

  render() {
    return (
      <input
        type="text"
        value={this.state.value}
        onChange={this.handleChange}
      />
    );
  }
}

在这个例子中，this.state.value 初始值为 undefined，这意味着 input 最初是一个未受控组件。然而，当用户输入时，handleChange 方法会更新 state，使得 value 变为一个非 undefined 的值，从而将 input 转换为受控组件。这种行为会导致 React 抛出警告。

3. 如何解决这个错误？

要解决这个错误，你需要确保输入组件始终保持一致的状态，即要么始终是受控组件，要么始终是未受控组件。以下是几种常见的解决方案：

3.1 始终使用受控组件

最简单的解决方案是始终将输入组件设置为受控组件。这意味着你需要为 value 属性提供一个初始值，而不是 undefined 或 null。

class ControlledInput extends React.Component {
  constructor(props) {
    super(props);
    this.state = { value: '' }; // 初始值为空字符串
  }

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

  render() {
    return (
      <input
        type="text"
        value={this.state.value}
        onChange={this.handleChange}
      />
    );
  }
}

在这个例子中，this.state.value 的初始值为空字符串，因此 input 始终是一个受控组件。

3.2 始终使用未受控组件

如果你不想使用受控组件，可以选择始终使用未受控组件。这意味着你需要避免使用 value 属性，而是通过 ref 来访问输入的值。

class UncontrolledInput extends React.Component {
  constructor(props) {
    super(props);
    this.inputRef = React.createRef();
  }

  handleSubmit = (event) => {
    event.preventDefault();
    alert('A name was submitted: ' + this.inputRef.current.value);
  };

  render() {
    return (
      <form onSubmit={this.handleSubmit}>
        <input type="text" ref={this.inputRef} />
        <button type="submit">Submit</button>
      </form>
    );
  }
}

在这个例子中，input 始终是一个未受控组件，因为它的值由 DOM 节点直接管理。

3.3 动态切换受控和未受控状态

在某些情况下，你可能需要根据条件动态切换输入组件的受控和未受控状态。为了避免 React 抛出警告，你需要确保在切换时不会出现不一致的行为。

class DynamicInput extends React.Component {
  constructor(props) {
    super(props);
    this.state = { value: undefined, isControlled: false };
  }

  toggleControl = () => {
    this.setState((prevState) => ({
      isControlled: !prevState.isControlled,
      value: prevState.isControlled ? undefined : '',
    }));
  };

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

  render() {
    const { isControlled, value } = this.state;
    return (
      <div>
        <button onClick={this.toggleControl}>
          {isControlled ? 'Switch to Uncontrolled' : 'Switch to Controlled'}
        </button>
        <input
          type="text"
          value={isControlled ? value : undefined}
          onChange={this.handleChange}
        />
      </div>
    );
  }
}

在这个例子中，input 的状态会根据 isControlled 的值动态切换。当 isControlled 为 true 时，input 是一个受控组件；当 isControlled 为 false 时，input 是一个未受控组件。通过这种方式，你可以避免 React 抛出警告。

3.4 使用 defaultValue 属性

如果你希望输入组件在初始时是未受控的，但随后可以变为受控的，你可以使用 defaultValue 属性来设置初始值。这样，React 不会将输入组件视为受控组件，直到你显式地提供了 value 属性。

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

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

  render() {
    return (
      <input
        type="text"
        defaultValue="Initial Value"
        value={this.state.value}
        onChange={this.handleChange}
      />
    );
  }
}

在这个例子中，input 的初始值为 "Initial Value"，但它是一个未受控组件。当用户输入时，handleChange 方法会更新 state，使得 input 变为受控组件。

4. 总结

“A component is changing an uncontrolled input to be controlled” 错误通常是由于输入组件的受控和未受控状态不一致导致的。要解决这个问题，你可以选择始终使用受控组件、始终使用未受控组件、动态切换受控和未受控状态，或者使用 defaultValue 属性来设置初始值。通过确保输入组件的一致性，你可以避免这个错误，并编写出更健壮的 React 代码。