javascript - 如何在 React.JS 的 onClick 事件监听器中向组件发送道具？

Question

单击卡片时，我想将 image_url 作为道具发送到另一个组件。以下是我的代码，但我既没有收到错误也没有发生任何事情！

// Component A whose information I want to send as props.
import React, { useEffect, useState } from "react";
import { apiDataTop, apiDataUpcoming, apiDataDay } from "../../api";
import styles from "./TopAnime.module.css";
import AnimeInfo from "../AnimeInfo/AnimeInfo";

const TopAnime = () => {
  const [animeData, setAnimeData] = useState([]);
  const [animeDataHype, setAnimeDataHype] = useState([]);
  const [animeDataDay, setAnimeDataDay] = useState([]);
  useEffect(() => {
    callApi();
  }, []);

  const callApi = async () => {
    const results = await apiDataTop();
    const hypeResults = await apiDataUpcoming();
    const dayResults = await apiDataDay();
    setAnimeData(results);
    setAnimeDataHype(hypeResults);
    setAnimeDataDay(dayResults);
  };

  console.log(animeDataDay);

  return (
    <div>
      <h1>Recent Release</h1>
      <div className={styles.container}>
        <br />
        {animeDataDay === []
          ? null
          : animeDataDay.map((anime) => {
              return (
                <a
                  href
                  onClick={(event) => {
                    event.preventDefault();
         
                   // window.location.href = `/anime/info/${animeName}`;
                   // Here I send info as props
                  return <AnimeInfo image_url={anime.image_url} />
                  }}
                  className={styles.move}
                >
                  <img src={anime.image_url} alt="anime" />
                                 </a>
              );
            })}
      </div>
// The Component B 

import React from "react";
import styles from "./AnimeInfo.module.css";

const AnimeInfo = (props) => {

  return (
    <div className={styles.container}>
      <img src={props.image_url} alt="anime" />
    </div>
  );
};

export default AnimeInfo;
 

我想在触发 onClick 事件时将信息从一个组件发送到另一个组件！我没有收到任何错误。如何实现这一点，特别是当 onClick 事件被触发时

标签： javascriptreactjsreact-props

Answer 1

1.创建一个状态变量来存储被点击项目的img_url

const [imgUrl,setImgUrl] = useState('')

2. 修改组件 A 如下

   <div>
     <h1>Recent Release</h1>
     <div className={styles.container}>
       <br />
       {animeDataDay === []
         ? null
         : animeDataDay.map((anime) => {
             return (
               <a
   
                 onClick={(event) => setImgUrl(anime.image_url)}
                 className={styles.move}
               >
                 <img src={anime.image_url} alt="anime" />
                                </a>
             );
           })}</div>
   <AnimeInfo image_url={imgUrl} />
   
   </div>
   

您可以将 </> 标签更改为其他文本标签，它会正常工作