用户在输入中输入内容后，立即添加其他组件

如何解决用户在输入中输入内容后，立即添加其他组件

我知道如何根据状态添加项目。当用户在输入中键入内容时，它会根据状态（映射）生成列表项，如以下代码所示。

  return (
    <div className="App">
      <input name="name" value={name} onChange={handleInput} />
      <button onClick={() => handleBtn(names)}>Click Me</button>
      {names.map((item) => (
        <div>{item}</div>
      ))}
    </div>
  );

但是我想在用户输入内容后立即自动添加一个附加组件。 要在完成输入后立即轻松添加其他组件，如下图所示（ +列表项） Here is an example

（其他问题）
我编写了一个添加listItem组件onChange事件的函数。但是，每次用户键入文本时，它都会添加一个组件。因此，我想，要成功添加其他组件，我需要知道用户何时开始输入和结束输入，不要多次添加（例如，用户停下了电话，再次输入）。你们有什么主意吗？

解决方法

您可以使用onBlur，以便当用户完成输入并失去输入的焦点时，可以添加其他组件。

onBlur每次在字段失去焦点时都会被调用，因此，如果仅在输入值已更改的情况下想要添加其他组件，则需要检查模糊后该值是否已更改，然后添加新组件。