[英]Why is there no `keyCode` value on the synthetic event in react using Semantic UI's Search component?
I have created a simple Search with Semantic UI's Search Component like this: 我已经使用语义UI的搜索组件创建了一个简单的搜索,如下所示:
<Search
value={searchString}
onSearchChange={onSearchChange}
showNoResults={false}
size="massive"
placeholder="eg. Huberdo"
input="text"
/>
This is my onSearchChange
func: 这是我的
onSearchChange
函数:
const onSearchChange = (e, data) => {
console.log(e.keyCode);
if (e.keyCode === 13) {
submit();
}
setSearchString(e.target.value);
};
Here is a minimum example of my problem. 这是我的问题的最小示例。 https://codesandbox.io/s/blue-leaf-7mzvo?fontsize=14
https://codesandbox.io/s/blue-leaf-7mzvo?fontsize=14
The Problem: 问题:
When I console log the event, I can't find any information about the keyCode that was pressed. 当我在控制台上记录事件时,找不到与所按下的keyCode有关的任何信息。
e.keyCode
is undefined as is e.charCode
. e.keyCode
未定义的是e.charCode
。
I need this so I can submit the search when the user hits enter. 我需要这样做,因此我可以在用户点击Enter时提交搜索。
Where is the keyCode hidden? keyCode隐藏在哪里?
According to the Semantic UI Doc's the func gets passed in a normal synthetic react event. 根据语义UI Doc的说法,函数是在正常的合成React事件中传递的。
e.target.value
is working as expected. e.target.value
运行正常。
You can do this by adding an onKeyDown
prop: 您可以通过添加
onKeyDown
道具来做到这一点:
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);
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.