React输入元素不应该从非受控切换到受控(反之亦然)

在React中，表单元素（如<input>、<textarea>、<select>）可以是受控组件或非受控组件。理解这两种组件的概念及其切换时的注意事项对于避免潜在的问题至关重要。

基础概念

受控组件：其值由React组件的状态控制。每次用户输入时，都会触发事件处理函数来更新状态。

非受控组件：其值由DOM自身管理。可以通过ref直接访问DOM元素的当前值。

为什么不应该从非受控切换到受控（反之亦然）

这种切换可能导致以下问题：

1. 不一致的状态：React可能无法准确跟踪组件的当前值，因为它在两种模式之间切换。
2. 意外的行为：用户输入可能不会按预期更新状态，或者在切换模式时丢失数据。

原因及解决方法

原因

• 状态初始化问题：在组件初始化时，如果同时设置了value属性和defaultValue属性，或者同时使用了value和ref，React可能会混淆。
• 生命周期问题：在组件的生命周期中，如果在不同的时间点改变了控制方式，可能会导致状态不同步。

解决方法

1. 始终使用一种模式：
   • 如果开始时是受控组件，就始终保持受控。
   • 如果开始时是非受控组件，就始终保持非受控。

• 正确设置初始状态：
  • 对于受控组件，确保在组件的状态中正确初始化值。
  • 对于非受控组件，可以使用defaultValue或defaultChecked属性来设置初始值。
• 避免混合使用：
  • 不要在同一个组件上同时使用value/onChange和defaultValue/defaultChecked。

示例代码

受控组件示例

import React, { useState } from 'react';

function ControlledInput() {
  const [value, setValue] = useState('');

  return (
    <input
      type="text"
      value={value}
      onChange={(e) => setValue(e.target.value)}
    />
  );
}

非受控组件示例

import React, { useRef } from 'react';

function UncontrolledInput() {
  const inputRef = useRef(null);

  function handleSubmit(event) {
    event.preventDefault();
    console.log(inputRef.current.value);
  }

  return (
    <form onSubmit={handleSubmit}>
      <input
        type="text"
        defaultValue="Initial Value"
        ref={inputRef}
      />
      <button type="submit">Submit</button>
    </form>
  );
}

应用场景

• 受控组件：适用于需要实时验证或处理用户输入的场景，如实时搜索框、表单验证等。
• 非受控组件：适用于简单的表单或不需实时处理的输入，如注册表单的最后提交按钮。

通过理解这两种模式的差异和适用场景，并遵循上述建议，可以有效避免在React开发中遇到的相关问题。