javascript - 如何拥有既可用于输入又可单击按钮的功能？

Question

我有这个输入和一个提交按钮：

<input onKeyDown={handleEnter} value={inputValue} onChange={(nv) => setInputValue(nv.currentTarget.value)} /> <button onClick={handleClick}>Submit</button>

触发一个功能：

  const handleEnter = (e) => {
    if (e.key === 'Enter') {
      handleSubmit()
    }
  }

但是现在我必须定义另一个单独的函数onClick来处理按钮。这似乎是DRY的情况（不要重复自己），我想知道如何通过单击按钮和使用相同的功能按 Enter 来处理该值。

Answer 1

作为 click 事件处理程序传递handleSubmit并创建一个单独的函数来测试按下了什么键然后调用handleSubmit.

所有“相同”的逻辑都包含在handleSubmit函数中。

---

也就是说，您可能应该将表单控件包装在 a 中<form>并只使用它的submit事件。（请注意，您需要调用e.preventDefault().