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

您尚未创建任何类或基于函数的组件。尝试在使用 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 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 传递给组件，这是主要的事情。

window.addEventListener("load", (event) => {            
    boxElement = document.getElementById("notification_popup"); console.log(boxElement);
    createObserver();
}, false);
function createObserver() {
    let observer;

    let options = {
        root: null,
        rootMargin: "0px",
        threshold: buildThresholdList()
    };

    observer = new IntersectionObserver(handleIntersect, options);
    observer.observe(boxElement);
}
function buildThresholdList() {
    let thresholds = [];
    let numSteps = 20;

    for (let i = 1.0; i <= numSteps; i++) {
        let ratio = i / numSteps;
        thresholds.push(ratio);
    }

    thresholds.push(0);
    return thresholds;
}
function handleIntersect(entries, observer) {
    entries.forEach((entry) => {
        if (entry.intersectionRatio > prevRatio) {

             entry.target.style.backgroundColor = increasingColor.replace("ratio", entry.intersectionRatio);    console.log("higher detected"); 
    


        } else {


    console.log( document.getElementById("notification_popup") == null ); 

    if(document.getElementById("notification_popup") == null){
        var para = document.createElement("P");                       // Create a <p> node
var t = document.createTextNode("This is a paragraph.");      // Create a text node
para.appendChild(t);                                          // Append the text to <p>
document.body.appendChild(para);
    
    }

我这个问题问得不好，没有包括我所有的代码，吸取教训！

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

3 个答案: