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

Question

I've found that onClick with option elements works only with Firefox desktop version. It does not work on mobiles and with Chrome desktop/mobile. I've read that onChange should be used with the select element instead of onClick. I tried but does not work. The original version is something like this:

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>
  );

}

And I tried this but this does not work too:

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>
 );
 }

The main goal is to execute a function with the value of a chosen option.

Answer 1

onSearch is not an event supported by react yet. You could instead use onChange and perform the computation based on the new value that this function provides.