Reactjs 如何提交具有恢复功能的输入'；onBlur的价值是多少？

我想使用钩子制作简单的函数输入组件。我希望它在单击按钮或按Enter键时提交其值

const Input = ({ name, value, onSubmit }) => {

  const [input, setInput] = useState(value);
  //set input's value with props.value
  useEffect(() => {
    setInput(value);
  }, [value]);

  return (
    <>
      <input
        name={name}
        value={input}
        onBlur={() => setInput(value)}
        onChange={e => setInput(e.target.value)}
      />
      // show submit button if input has been changed
      {value !== input && (<input type='submit' onClick={onSubmit} />)}
    </>
  );
}

const输入=（{name，value，onSubmit}）=>{
常量[input，setInput]=使用状态（值）；
//使用props.value设置输入值
useffect（（）=>{
设置输入（值）；
}，[价值]；
返回(
设置输入（值）}
onChange={e=>setInput（e.target.value）}
/>
//如果输入已更改，则显示提交按钮
{value！==输入&&（）}
);
}

使用onBlur恢复值效果很好。但是当我想提交输入时，我不能。OnBlur在onClick之前触发。在这里，我发现了两条建议：

使用onMouseDown，因为它在onBlur之前触发。好的，它可以工作，但我想保持我的应用程序键盘友好

将setTimeout添加到onBlur事件。但它会记住旧的值，所以即使我保存更改，我也无法在重新渲染后立即看到它们，这一点都不好

我找到了解决办法。我使用第二个onSubmit处理程序添加了表单，并在提交输入中将onClick更改为onMouseDown：

const Input = ({ name, value, onSubmit }) => {

  const [input, setInput] = useState(value);
  //set input's value with props.value
  useEffect(() => {
    setInput(value);
  }, [value]);

  return (
    <form onSubmit={onSubmit}>
      <input
        name={name}
        value={input}
        onBlur={() => setInput(value)}
        onChange={e => setInput(e.target.value)}
      />
      // show submit button if input has been changed
      {value !== input && (
        <input type='submit' onMouseDown={onSubmit} />)
      }
    </form>
  );
}

const输入=（{name，value，onSubmit}）=>{
常量[input，setInput]=使用状态（值）；
//使用props.value设置输入值
useffect（（）=>{
设置输入（值）；
}，[价值]；
返回(
设置输入（值）}
onChange={e=>setInput（e.target.value）}
/>
//如果输入已更改，则显示提交按钮
{value！==输入&&(
)
}
);
}

给你

---

有一个问题：使用Enter按钮提交后，输入仍然有焦点。有更好的方法吗？如果没有，我如何从onSubmit函数调用onBlur？

输入在使用Enter提交后仍然有焦点-这是一个什么问题？例如，如果我想对其应用其他样式。可能重复（但答案是关于类而不是类）@Aprillion好的，我想我会使用这个。非常感谢。