javascript - 点击功能不起作用,因为它在另一个返回语句中
问题描述
我试图通过点击按钮来创造历史
li 的 onclick 功能不起作用
正如您在代码中看到的那样,<SuggestionsList/>
在最后一个 return 语句中,它的函数呈现在 const SuggestionsList = (props) => {
. onclick 函数在函数内部 comimg const SuggestionsList
,这使得 onclick 函数不起作用
我在代码中创建了确切的工作并且它在那里工作没有任何问题我不明白为什么它在我的本地 输入链接描述中不起作用
function finddoctor(e) {
console.log(e);
history.push(`/detiled/${e} `);
}
const onChange = (event) => {
const value = event.target.value;
setInputValue(value);
setShowResults(false);
const filteredSuggestions = suggestions.filter(
(suggestion) =>
suggestion.firstname
.toString()
.toLowerCase()
.includes(value.toLowerCase()) ||
suggestion.id.toString().toLowerCase().includes(value.toLowerCase())
);
setFilteredSuggestions(filteredSuggestions);
setDisplaySuggestions(true);
};
const onSelectSuggestion = (index) => {
setSelectedSuggestion(index);
setInputValue(filteredSuggestions[index]);
setFilteredSuggestions([]);
setDisplaySuggestions(false);
};
const SuggestionsList = (props) => {
const {
suggestions,
inputValue,
onSelectSuggestion,
displaySuggestions,
selectedSuggestion,
} = props;
if (inputValue && displaySuggestions) {
if (suggestions.length > 0) {
return (
<ul className="suggestions-list" style={styles.ulstyle}>
{suggestions.map((suggestion, index) => {
const isSelected = selectedSuggestion === index;
const classname = `suggestion ${isSelected ? "selected" : ""}`;
return (
<>
<li
style={styles.listyle}
onClick={finddoctor(suggestion.id)}
key={index}
className={classname}
>
{suggestion.firstname}
</li>
</>
);
})}
</ul>
);
} else {
return <div>No suggestions available...</div>;
}
}
return <></>;
};
useEffect(() => {
axios
.get("admin-panel/all-doctors-list/")
.then((res) => {
const data = res.data;
setShowSerch(data);
});
}, []);
return (
<>
<div className="note-container" style={styles.card}>
<div style={styles.inner}>
<p style={{ textAlign: "left" }}>Search Doctors</p>
<form className="search-form" style={{}}>
{showResults ? (
<FontAwesomeIcon
style={{ marginRight: "-23px" }}
icon={faSearch}
/>
) : null}
<input
onChange={onChange}
value={inputValue}
style={styles.input}
type="Search"
/>
<SuggestionsList
inputValue={inputValue}
selectedSuggestion={selectedSuggestion}
onSelectSuggestion={onSelectSuggestion}
displaySuggestions={displaySuggestions}
suggestions={filteredSuggestions}
/>
</form>
</div>
</div>
</>
);
};
解决方案
而不是onClick={finddoctor(suggestion.id)}
(这里只是函数调用正在发生并且预计会有回调方法)
应该
onClick={() => finddoctor(suggestion.id)}
推荐阅读
- python - 无法理解如何在 FOR 循环中附加子嵌套字典和附加字典
- c++ - 可变模板参数顺序问题
- python - 重新调整数据框的大小
- xsd - 带有可选元素和任何元素的 XSD 序列
- java - 如何使用比较器?
- powershell - 返回包含接口默认网关的对象的 Powershell cmdlet
- netlogo - netlogo tie-mode "fixed" 无法在中等程度的图中保持链接长度
- reactjs - 将导航参数传递给第二个屏幕组件状态反应导航
- spring-boot - Spring data @ReadOnlyProperty 导致意外行为
- package - LaTeX:如果一个包被加载两次,有没有办法得到警告?