![](/img/trans.png)
[英]React JS - value from Search component in Semantic UI is an object reference, not a value
[英]Why is there no `keyCode` value on the synthetic event in react using Semantic UI's Search component?
我已经使用语义UI的搜索组件创建了一个简单的搜索,如下所示:
<Search
value={searchString}
onSearchChange={onSearchChange}
showNoResults={false}
size="massive"
placeholder="eg. Huberdo"
input="text"
/>
这是我的onSearchChange
函数:
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
问题:
当我在控制台上记录事件时,找不到与所按下的keyCode有关的任何信息。 e.keyCode
未定义的是e.charCode
。
我需要这样做,因此我可以在用户点击Enter时提交搜索。
keyCode隐藏在哪里?
根据语义UI Doc的说法,函数是在正常的合成React事件中传递的。 e.target.value
运行正常。
您可以通过添加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.