无法在反应中获得关键道具的价值[重复]

Question

   const arry = [{id: 1, key: "fsdfsdfs6645",sub: "AB"},
                 { id: 2,key: "jhkhkhjk55",sub: "BC"},
                 {id: 3,key: "iksstrrtrk55",sub: "VK"}
                 ];

我在这里使用的那个arry

import { arry } from "./constant";

export default function App() {
  const onChangeHandler = (e) => {
    console.log(e.target.key);
  };

  return (
    <div className="App">
      <select onChange={onChangeHandler}>
        {arry.map((obj) => {
          return <option key={obj.key}>{obj.sub}</option>;
        })}
      </select>
    </div>
  );
}

我试图通过 onChange 访问键值 如何访问该键值？

这里是代码链接code

Answer 1

可以使用<option>的value属性：

export default function App() {
  function onChangeHandler(e) {
    console.log(e.target.value);  // value
  }
  return (
    <div>
      <select onChange={onChangeHandler}>
        {arry.map(obj => (
          <option key={obj.key} value={obj.key}>{obj.sub}</option>)
        )}
      </select>
    </div>
  );
}