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

import React, { useState } from 'react';

// 子组件：包含输入框
function PoolSize({ d_key, attributes, onChangeHandler }) {
  console.log(`PoolSize ${d_key} rendered`); // 用于观察渲染
  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}
      />
    </div>
  );
}

// 父组件：动态管理PoolSize组件列表
function ParentComponent() {
  const [conditions, setConditions] = useState([
    { id: 1, attributes: { pool_size_number: '' } },
  ]);

  const onChangeHandler = (key, event) => {
    setConditions((prevConditions) => {
      let newCondition = [...prevConditions];
      // 简单模拟验证逻辑
      const validatedValue = event.target.value.replace(/[^0-9]/g, ''); 
      newCondition[key].attributes[event.target.name] = validatedValue;
      return newCondition;
    });
  };

  // 模拟一个导致问题的辅助函数
  const renderFormContent = () => {
    return (
      <form onSubmit={(e) => e.preventDefault()}>
        <div className="filter-container">
          {conditions.map((condition, index) => (
            <PoolSize
              onChangeHandler={onChangeHandler}
              key={index + "_optimise"} // 列表key
              d_key={index}
              attributes={condition.attributes}
            />
          ))}
        </div>
      </form>
    );
  };

  return (
    <div>
      <h1>动态输入框示例 (问题版本)</h1>
      <button onClick={() => setConditions([...conditions, { id: conditions.length + 1, attributes: { pool_size_number: '' }}])}>
        Add Condition
      </button>
      {renderFormContent()} {/* 每次渲染都调用此函数，返回新的JSX对象 */}
    </div>
  );
}

export default ParentComponent;