React <input>：输入时关闭软键盘

【问题标题】：React <input>: Dismiss soft keyboard on enterReact <input>：输入时关闭软键盘
【发布时间】：2021-07-23 10:42:12
【问题描述】：

我正在编写一个将在移动设备上使用的 React 应用程序。

其中一个页面包含用户使用键盘输入的<input> 文本。在字段中输入文本会立即生效，因此之后无需按下任何按钮。我想让软键盘的“输入”键简单地关闭键盘而不采取任何行动。这是可能吗？听起来很简单，但我找不到怎么做。

为了它的价值，我尝试添加enterKeyHint="done" 属性（如here 所述），但除了将输入标题从“完成”更改为“v”符号之外，它不会关闭键盘。

有什么想法吗？提前致谢！

【问题讨论】：

标签： javascript html reactjs

【解决方案1】：

听起来这只是从元素本身触发blur() 的问题。您可以从事件处理程序触发blur()，也可以使用useRef。

如果您不希望您的输入使事件向上冒泡，或者如果它在表单内，请确保e.stopPropagation() 或 e.preventDefault()

export default function App() {
  const onEnter = (e) => {
    if (e.key === "Enter") {
      e.target.blur();
    }
  };

  return (
    <div className="App">
      <input onKeyUp={onEnter} />
    </div>
  );
}

演示：https://codesandbox.io/s/relaxed-antonelli-j6c5d?file=/src/App.js

【讨论】：