我剛剛開始學習 react js，這是我的第一個 react js 應用程式。我正在使用 api 來獲取資料。到目前為止它有效，但現在我想向從搜索欄組件獲取的函式添加搜索關鍵字。
這是我的代碼：
搜索欄.js
const SearchBar = ({ getUsers }) => {
return (
<div className="is-flex flex-align-items-center mb-3">
<input type="text" id="query" className="input search-input" placeholder="search keyword"/>
<Button className="search-btn ps-3 pe-3"
onClick={() => getUsers(document.querySelector('#query').value)}>
<FontAwesomeIcon icon={faMagnifyingGlass} />
</Button>
</div>
);
};
主用戶.js
import { useState, useEffect } from "react";
import SearchBar from "./SearchBar";
const MasterUser = () => {
const [users, setUsers] = useState([]);
useEffect(() => {
getUsers();
}, []);
const getUsers = async (query='') => {
console.log('get users', query);
try {
let myurl = 'http://localhost:8080/users';
const response = await fetch(myurl);
const data = await response.json();
setUsers(data);
setIsLoading(false);
} catch (e) {
console.log(e.getMessage());
}
};
return (
<div>
<SearchBar onClick={getUsers}/>
</div>
);
};
當應用程式加載時，控制臺日志get users <empty string>顯示并按預期回傳所有用戶，但是當我單擊搜索按鈕（放大鏡）時，它給出了一個錯誤Uncaught TypeError: getUsers is not a function。
任何幫助表示贊賞..
uj5u.com熱心網友回復：
<SearchBar onClick={getUsers}/>
您已將道具命名為onClicknot getUsers。這就是為什么你得到那個錯誤。
是的，使用選擇器（例如）訪問 dom 元素值document.querySelector('#query').value也不是典型的反應。閱讀受控表單元素（將表單元素值保存在狀態中）。
uj5u.com熱心網友回復：
像這樣讓你的 searchBar 組件更具反應性
const SearchBar = ({ getUsers }) => {
const [searchValue,setSearchValue]=useState('');
return (
<div className="is-flex flex-align-items-center mb-3">
<input type="text" id="query" className="input search-input" placeholder="search keyword" value={searchValue} onChange={(e)=>setSearchValue(e.target.value)}/>
<Button className="search-btn ps-3 pe-3"
onClick={() => getUsers(searchValue)}>
<FontAwesomeIcon icon={faMagnifyingGlass} />
</Button>
</div>
);
};
轉載請註明出處，本文鏈接：https://www.uj5u.com/qita/451959.html