OnClick 事件在 map 中不起作用 function 反应

Question

我不确定为什么我不能在 map function 中使用 onClick？？？我正在从我的 redux 文件中的 useSelector 获取数据。 单击 TestComponent 什么都不做，它似乎甚至无法控制台记录任何内容。 为了方便看，我把一些不相关的代码拿出来了。 我的实际目标是将 TestComponent 中的索引传递给 reducer 方法。 但首先我只想至少安慰一下。

import React from "react";
import CourseListItem from "../components/CourseListItem";
import styles from "./CourseList.module.css";
import { useSelector, useDispatch } from "react-redux";
import { slideActions } from "../store/index";

export default function CourseList() {
  const dispatch = useDispatch();
  const totalSlides = useSelector((state) => state.slide.SlideData.length);
  const currentSlide = useSelector((state) => state.slide.currentSlide);

  const SlideData = useSelector((state) => state.slide.SlideData);
  const list = SlideData.map((item, index) => (
    <CourseListItem key={index} slideNumber={index} title={item.title} onClick={console.log("hello")} />
  ));

  const currentSlideContent = useSelector((state) => {
    //if array item is defined return its title//
    if (state.slide.SlideData[currentSlide]) {
      return state.slide.SlideData[currentSlide].title;
    }
  });

  const nextSlideHandler = () => {
    dispatch(slideActions.goNextSlide());
  };
  const prevSlideHandler = () => {
    dispatch(slideActions.goPrevSlide());
  };
  const goToSlideHandler = (param) => {
    dispatch(slideActions.goToSlide(param));
  };

  return (
    <>
      <div className={styles.container}>
        <div>
          <h2>Total Slides: {totalSlides}</h2>
          <h2>Current Slide: {currentSlide}</h2>
          <button onClick={nextSlideHandler}>Next Slide</button>
          <button onClick={prevSlideHandler}>Prev Slide</button>
        </div>
        <div>
          <h1>List</h1>
          {list}
        </div>
      </div>
    </>
  );
}

我对此进行了编辑，以包含该文件中的所有代码。 我道歉。

Answer 1

如果您使用的是 reactslick npm 并且需要通过 function 传递 arguments 就这样调用

data.map(val=>
<div onClick={()=>handleplay(val)} >slide</div>
)

Answer 2

您尚未创建任何基于类或函数的组件。 尝试在使用 Hooks 并调用它时制作这个基于函数的组件。 然后它会起作用。 此外，您还没有导入TestComponent。 这样做，它会很有希望地工作：

import React from "react";
import styles from "./CourseList.module.css";
import { useSelector, useDispatch } from "react-redux";
import { slideActions } from "../store/index";
import {TestComponent} from 'TestComponent'; //Import from your project this is hint


export const Tester = () => { // Make it functional like this

//get slide data//
const SlideData = useSelector((state) => state.slide.SlideData);

//map data
const list = SlideData.map((item, index) => (
    <TestComponent key={index} slideNumber={index} title={item.title} onClick={()=>console.log("hello")} />
  ));

//render components
return (
    <>
      <div className={styles.container}
        <div>
          <h1>List</h1>
          {list}
        </div>
      </div>
    </>
  );
  } //Ends here

现在从你的项目中调用这个测试器组件并在onClick之后检查控制台。

Answer 3

Hooks 只能在函数组件内部调用

import styles from "./CourseList.module.css";
import { useSelector, useDispatch } from "react-redux";
import { slideActions } from "../store/index";

//map data
const list = SlideData.map((item, index) => (
    <TestComponent key={index} slideNumber={index} title={item.title} onClick={()=>console.log("hello")} />
  ));

const componentName = () => {
//get slide data//
const SlideData = useSelector((state) => state.slide.SlideData);

 return (
    <>
      <div className={styles.container}>
        <div>
          <h1>List</h1>
          {list}
        </div>
      </div>
    </>
  );
}

Answer 4

我找到了原因。 首先，我没有正确地编写我的 onClick，其次我没有通过 props 将 onClick 传递给组件，这是主要的事情。

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

fix two in CourseListItem.js
2)
 <div onClick={props.onClick}>
        //stuff
 </div>

我问这个问题很糟糕，没有包含我所有的代码，吸取了教训！