解决React输入框连续输入时焦点丢失的问题

// 假设的导致问题的父组件结构
const ParentComponent = () => {
  const [conditions, setConditions] = useState([]); // 假设有状态

  const onChangeHandler = (key, event) => {
    setConditions((prevConditions) => {
      let newCondition = [...prevConditions];
      // ... 验证和更新逻辑 ...
      newCondition[key].attributes[event.target.name] = event.target.value;
      return newCondition;
    });
  };

  // 错误的模式：将表单渲染逻辑封装在一个函数中，且该函数每次渲染都被调用
  const renderFormContent = () => {
    return (
      <form onSubmit={/* ... */}>
        <div className="filter-container">
          {conditions.map((condition, index) => (
            <PoolSize
              onChangeHandler={onChangeHandler}
              key={index + "_optimise"}
              d_key={index}
              attributes={condition.attributes} // 假设传递属性
              // ... 其他props ...
            />
          ))}
        </div>
      </form>
    );
  };

  return (
    <div>
      {/* 每次ParentComponent渲染时，renderFormContent都会被调用，
          并返回一个全新的<form>元素对象。React会认为这是一个新的DOM元素，
          从而销毁旧的并创建新的，导致内部输入框焦点丢失。 */}
      {renderFormContent()}
    </div>
  );
};

const ParentComponent = () => {
  const [conditions, setConditions] = useState([]); // 假设有状态

  const onChangeHandler = (key, event) => {
    setConditions((prevConditions) => {
      let newCondition = [...prevConditions];
      // 假设的验证逻辑，确保值是合法的
      const validatedValue = validateInput(event.target.name, event.target.value);
      newCondition[key].attributes[event.target.name] = validatedValue;
      return newCondition;
    });
  };

  // 内部的PoolSize组件
  const PoolSize = ({ d_key, attributes, onChangeHandler }) => {
    return (
      <div className="container" name="Pool Size">
        <label id="label">Max Pool Amount is </label>
        <input
          id="pool_size"
          name="pool_size_number"
          type="number"
          placeholder="100000"
          key={d_key + "_pool_size_number"} // 确保key是稳定的
          onInput={(event) => onChangeHandler(d_key, event)}
          value={attributes.pool_size_number || ''} // 确保value始终是一个受控值
        ></input>
      </div>
    );
  };

  return (
    <>
      {/* 正确的模式：将表单JSX直接放置在return语句中 */}
      <form onSubmit={/* optimizeHandler */}>
        <div className="filter-container">
          {conditions.map((condition, index) => {
            return (
              <PoolSize
                // onDeleteHandler={deleteCondition} // 假设这些是存在的
                onChangeHandler={onChangeHandler}
                // onSelectHandler={onSelectConditionHandler}
                key={index + "_optimise"} // 确保key是稳定的
                d_key={index}
                attributes={condition.attributes} // 假设condattributes是condition的一部分
                // columns={selectedColumns}
              />
            );
          })}
        </div>
        {/* ... 其他表单元素 ... */}
      </form>
    </>
  );
};

// 假设的 validateInput 函数
const validateInput = (name, value) => {
  if (name === "pool_size_number") {
    return parseInt(value) || 0; // 确保返回数字或默认值
  }
  return value;
};