在反应中无法获得键道具的值

Question

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

我在这里使用的数组

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访问键值我如何访问该键值?

这里是代码链接代码

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