React中如何通过Props将子组件点击事件的参数传递给父组件

1. 修改子组件传递type参数 #

在子组件的按钮点击事件中，通过箭头函数将当前项的type作为参数传递给父组件的回调函数：

const VerticalCarousel = ({ data, clickActionTransfer }) => {
    return (
        <div className="carousel-inner">
            {data.map((item, i) => (
                <button
                    type="button"
                    onClick={() => clickActionTransfer(item.type)}
                    key={i}
                >
                    <span className="span-theme"></span>
                    {item.type}
                </button>
            ))}
        </div>
    )
}

2. 父组件接收并处理type参数 #

在父组件中更新handleSlideClick函数，让它接收子组件传递的type值，之后就能在函数内基于该值执行相关逻辑：

const Slider = ({ getData, clickAction, children }) => {
  const [dataSlider, setDataSlider] = useState([]);
  const [idLoader, setIdLoader] = useState(clickAction);

  const handleSlideClick = (type) => {
    // 这里添加基于type的业务逻辑
    console.log('子组件传递的type:', type);
    // 原有无关逻辑保留...
  };

  return (
    <div className="slider__container">
      {dataSlider.map((i) => {
        return (
          idLoader === i.id &&
          i.id <= dataSlider.length && (
            <div key={i.id}>
              <div
                style={{
                  transform: `translateX(-${currentIndex * 100}%)`,
                  display: "flex",
                  position: "fixed",
                  transition: "all .5s 1s linear",
                }}
              >
                {children}
              </div>
              <div
                className={
                  displayTitleState && i.theme === "dark" ? "dark-theme" : ""
                }>
                {dataSlider.map((i, index) => {
                  return <h1 key={index}> {i.title}</h1>;
                })}
              </div>
              <div className="slider__content">
                <div
                  className={`slider__right ${
                    displayCarouselState ? "showCarousel" : "hideCarousel"
                  } ${i.theme === "dark" ? "dark-theme" : ""}`}
                >
                  <VerticalCarousel
                    data={i.slider}
                    clickActionTransfer={handleSlideClick}
                  />
                </div>
              </div>
            </div>
          )
        );
      })}
    </div>
  );
}

关键说明 #

• 子组件使用箭头函数包装点击事件，确保每次点击都能精准传递当前项的type值，避免因闭包问题导致参数错误。
• 父组件的handleSlideClick函数现在可以直接使用type参数，完成你需要的业务处理。

内容的提问来源于stack exchange，提问作者Madara uchi