首页 > 解决方案 > onChange 事件不会在 .map 函数 React 中触发

问题描述

我无法触发此 onChange 事件?目标是从下拉列表中呈现多个选项,从我拥有的一些数据中,然后在单击任何选项时控制台日志“hello”......

它似乎不想让我在呈现的选项元素中使用 onChange 或 onClick 事件。如果我可以先简单地控制台日志,那么我可以弄清楚其他所有内容。我只发布了必要的代码,但如果需要我可以发布其余的!

const SlideData = [
  {
    title: "Slide 0",
  },
  {
    title: "Slide 1",
  },
  {
    title: "Slide 2",
  },
];

export default SlideData;
let options = SlideData.map((item, index) => (
    <option
      key={index}
      value={index}
      onChange={() => {
        console.log("hello");
      }}
    >
      {item.title}
    </option>
  ));
 <select className={styles.select} onChange={goto}>
          <option>--Select--</option>
          {options}
 </select>

标签: reactjseventsdrop-down-menuonchangearray.prototype.map

解决方案


option标签不支持onChange. 你可以onClick改用。

onClick={() => {
  console.log("hello");
}}

推荐阅读