OnClick 事件在地图功能中不起作用反应

Question

我不确定为什么我不能在 map 函数中对此使用 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

您尚未创建任何class或基于功能的组件。尝试在使用 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

现在从您的项目中调用此 Tester 组件 并在 onClick 之后检查控制台。

Answer 2

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 3

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

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

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

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

Answer 4

如果您正在使用 reactslick npm 并且需要通过函数传递参数，只需像这样调用

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

OnClick 事件在地图功能中不起作用反应

OnClick event not working in map function react

reactjs

redux

react-redux

onclick

array.prototype.map