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

Question

我发现带有选项元素的 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>
 );
 }

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

Answer 1

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

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

How can I use onClick or onSearch event handlers with <select> and <option> elements in ReactJs?

javascript

reactjs

google-chrome

select

option