onChange 事件不会在 .map 函数 React 中触发答案

【问题标题】：onChange event won't fire in .map function ReactonChange 事件不会在 .map 函数 React 中触发
【发布时间】：2021-10-07 21:05:34
【问题描述】：

我无法触发这个 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>

【问题讨论】：

标签： reactjs events drop-down-menu onchange array.prototype.map

【解决方案1】：

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

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

【讨论】：

谢谢，但我的检查员似乎也没有控制台日志？
不知是否需要创建一个Option组件并将数据传递给它...
我认为你应该在函数goto中处理
是的，也许我必须在它之外调用另一个函数
我不太明白，但我想这行得通。我猜是反应...谢谢

【解决方案2】：

目标是从技术上传递索引和控制台日志。所以我想这对我有用

const slideRef = useRef();
const goto = ({ target }) => {
    slideRef.current.goTo(parseInt(target.value, 10));
    console.log(target.value);
  };

  const options = SlideData.map((item, index) => (
    <option key={index} value={index}>
      {item.title}
    </option>
  ));

return (
    <div className={styles.container}>
      <Slide ref={slideRef} {...properties}>
        <div className={styles.slide}>First Slide</div>
        <div className={styles.slide}>Second Slide</div>
        <div className={styles.slide}>Third Slide</div>
        <div className={styles.slide}>Fourth Slide</div>
        <div className={styles.slide}>Fifth Slide</div>
      </Slide>
      <div>
        <Button type="button" onClick={back}>
          Back
        </Button>
        <Button type="button" onClick={next}>
          Next
        </Button>
        <select className={styles.select} onChange={goto}>
          <option>--Select--</option>
          {options}
        </select>
      </div>
    </div>
  );

【讨论】：