Почему нет значения `keyCode` для синтетического события в реакции, используя компонент поиска Semantic UI? - PullRequest
Новая
       16

Почему нет значения `keyCode` для синтетического события в реакции, используя компонент поиска Semantic UI?

0 голосов
/ 16 мая 2019

Я создал простой поиск с помощью компонента поиска семантического пользовательского интерфейса, например: 

<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.

Мне это нужно, чтобы я мог отправить запрос, когда пользователь нажмет ввод.

Где скрыт код клавиши?

Согласно документу Semantic UI DOC, функция передается в обычном синтетическом событии реакции. e.target.value работает как положено.

1 Ответ

1 голос
/ 16 мая 2019

Вы можете сделать это, добавив 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);
...