为什么使用语义 UI 的搜索组件在 react 中的合成事件上没有"keyCode"值？

Question

我已经使用Samantic UI的搜索组件创建了一个简单的搜索：

<Search
    value={searchString}
    onSearchChange={onSearchChange}
    showNoResults={false}
    size="massive"
    placeholder="eg. Huberdo"
    input="text"
  />

这是我的onSearchChange func：

const onSearchChange = (e, data) => {
console.log(e.keyCode);
if (e.keyCode === 13) {
  submit();
}
setSearchString(e.target.value);
};

这是我问题的最低示例。https://codesandbox.io/s/blue-leaf-7mzvo?fontsize=14

问题：

主机记录事件时，我找不到有关按下的密钥代码的任何信息。e.keyCode和e.charCode一样不确定。

我需要这个，这样我就可以在用户命中输入时提交搜索。

键代码在哪里隐藏？

根据语义UI DOC的功能，该功能在正常的合成反应事件中通过。 e.target.value正在按预期工作。

Answer 1

您可以通过添加onKeyDown Prop：

来做到这一点

import React, { useState } from "react";
import ReactDOM from "react-dom";
import { Search } from "semantic-ui-react";
import "./styles.css";
function App() {
  const [searchString, setSearchString] = useState("");
  const handleEnter = e => {
    if (e.keyCode === 13) {
      submit();
    }
  };
  const onSearchChange = (e, data) => {
    setSearchString(e.target.value);
  };
  const submit = () => {
    console.log("submitted");
  };
  return (
    <Search
      value={searchString}
      onSearchChange={onSearchChange}
      showNoResults={false}
      size="massive"
      placeholder="eg. Huberdo"
      input="text"
      onKeyDown={handleEnter}
    />
  );
}
const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);