![](/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.