javascript - 状态更改时 TextField 失去焦点

Question

我是根据按钮点击动态创建表单，所以当用户按下按钮时，表单会生成一个新的 id。所以，我像这样为 createform 计数器创建了一个状态，

const [formmakersno, setFormmakersno] = useState([0]);

在我的渲染中，我有这样的东西：

{formmakersno.map((no) => {
      return formDetails;
    })}

我的“formDetails”是 jsx 的常量，它只返回文本字段和按钮等表单元素。一切正常，每次单击按钮时，表单都会按预期生成，但是，我想在每次创建新表单时传递计数器编号，作为道具，因为当它只是一个返回的 const 时我不能这样做一个 jsx，我将它转换为箭头函数，以便我可以传递道具并像这样传递它：

{formmakersno.map((no) => {
      return <formDetails value={no} />;
    })}

而且我也可以访问道具，但问题是，每次我在文本字段中输入每个字母时，文本字段都会失去焦点，因为它是一个每次都会呈现的组件，因为我正在调用一个内部状态更改的 Onchange 方法. 有解决方法吗？

编辑：我创建了这个简单的例子来进一步说明我面临的问题：

    export const CreatePush2 = () => {
  const [titles, setTitles] = useState(["", ""]);
  const [numbers, setNumbers] = useState([0, 1, 2]);

  const handleChange = (e, id) => {
    const { value } = e.target;
    let titles_1 = [...titles];
    let titles_11 = titles_1[id];
    titles_11 = value;
    setTitles(titles_1);
    console.log(titles);
  };

  const InputCreator = ({ id }) => {
    return (
      <form>
        <input type="text" onChange={(e) => handleChange(e, id)} value={titles[id]} />
        <br />
      </form>
    );
  };
  return (
    <div>
      {numbers.map((number) => {
        return <InputCreator key={number.toString()} id={number} />;
      })}
    </div>
  );
};

export default CreatePush2;

输入每个字母时，文本字段都会失去焦点。

标签： javascripthtmlreactjs