我如何在 ReactJs 中将 onClick 或 onSearch 事件处理程序与 <select> 和 <option> 元素一起使用?
How can I use onClick or onSearch event handlers with <select> and <option> elements in ReactJs?
我发现带有选项元素的 onClick 仅适用于 Firefox 桌面版。它不适用于手机和 Chrome desktop/mobile。
我读过 onChange 应该与 select 元素一起使用,而不是 onClick。我试过了但没有用。
原来的版本是这样的:
const ASV = "ASV";
const ASVtext = "ASVtext";
const KJV = "KJV";
const KJVtext = "KJVtext";
const setBibleVersion = (x, y) => alert(x + " " + y);
export default function App() {
return (
<div className="App">
<h1>onClick / onSearch with select </h1>
<select defaultValue="ASV">
<option value="ASV" onClick={() => setBibleVersion(ASV, ASVtext)}>
{ASVtext}
</option>
<option value="KJV" onClick={() => setBibleVersion(KJV, KJVtext)}>
{KJVtext}
</option>
</select>
</div>
);
}
我试过了,但这也行不通:
const setBibleVersion = x => alert(x);
export default function App() {
return (
<div className="App">
<h1>onClick / onSearch with select </h1>
<select defaultValue="ASV" onSearch={(value) => setBibleVersion(value)}>
<option value="ASV">{ASVtext}</option>
<option value="KJV">{KJVtext}</option>
</select>
</div>
);
}
主要目标是使用所选选项的值执行函数。
onSearch
还不是 React 支持的事件。您可以改用 onChange
并根据此函数提供的新值执行计算。
我发现带有选项元素的 onClick 仅适用于 Firefox 桌面版。它不适用于手机和 Chrome desktop/mobile。 我读过 onChange 应该与 select 元素一起使用,而不是 onClick。我试过了但没有用。 原来的版本是这样的:
const ASV = "ASV";
const ASVtext = "ASVtext";
const KJV = "KJV";
const KJVtext = "KJVtext";
const setBibleVersion = (x, y) => alert(x + " " + y);
export default function App() {
return (
<div className="App">
<h1>onClick / onSearch with select </h1>
<select defaultValue="ASV">
<option value="ASV" onClick={() => setBibleVersion(ASV, ASVtext)}>
{ASVtext}
</option>
<option value="KJV" onClick={() => setBibleVersion(KJV, KJVtext)}>
{KJVtext}
</option>
</select>
</div>
);
}
我试过了,但这也行不通:
const setBibleVersion = x => alert(x);
export default function App() {
return (
<div className="App">
<h1>onClick / onSearch with select </h1>
<select defaultValue="ASV" onSearch={(value) => setBibleVersion(value)}>
<option value="ASV">{ASVtext}</option>
<option value="KJV">{KJVtext}</option>
</select>
</div>
);
}
主要目标是使用所选选项的值执行函数。
onSearch
还不是 React 支持的事件。您可以改用 onChange
并根据此函数提供的新值执行计算。