我如何使用 onClick 或 onSearch 事件处理程序<select>和<option>ReactJs 中的元素？

Question

我发现带有选项元素的 onClick 仅适用于 Firefox 桌面版本。 它不适用于手机和 Chrome 桌面/移动设备。 我读过 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>
 );
 }

主要目标是使用所选选项的值执行函数。

Answer 1

onSearch是 react 支持的事件。 您可以改为使用onChange并根据此函数提供的新值执行计算。