时间戳

首页 > 解决方案 > 如何从 onClick 获取特定数据并将其显示到 React 中的另一个页面

json - 如何从 onClick 获取特定数据并将其显示到 React 中的另一个页面

问题描述

所以我目前正在做一个反应项目，我试图弄清楚如何从单击的按钮/配置文件中获取特定数据，然后将其显示到另一个页面上。

这是我目前拥有的。以下是主页上当前显示的不同名人的个人资料列表。每个都显示为您可以单击的个人资料卡。

import React from 'react';
import '../styles/Profile.css';
import ProfileItems from '../components/ProfileItems';

function profile() {
return (
<div className='profile'>
  <h1>Choose A Profile</h1>
  <div className='profile__container'>
    <div className='profile__wrapper'>
      <ul className='profile__items'>
        <ProfileItems
          src='images/KimK.jpg'
          text='Kim Kardashian - Skims'
          label='Social Media Influncer'
          path='/'
        />
        <ProfileItems
          src='images/TheRock.jpg'
          text='The Rock - Zoa Energy Drink'
          label='Pressional Wrestler & Actor'
          path='/'
        />
      </ul>
      <ul className='profile__items'>
        <ProfileItems
          src='images/Ronaldo.jpg'
          text='Cristiano Ronaldo - Portugal Team'
          label='Professional Soccer Player'
          path='/'
        />
        <ProfileItems
          src='images/Kylie.jpg'
          text='Kylie Jenner - Kylie Cosmetics'
          label='Social Media Influncer'
          path='/'
        />
        <ProfileItems
          src='images/Elon.jpg'
          text='Elon Musk - Tesla'
          label='CEO'
          path='/'
        />
      </ul>
    </div>
  </div>
</div>
);
}

export default profile;

现在对于这些配置文件中的每一个，当它们被单击时，我希望它们被专门路由或设置到具有各自数据的另一个页面的路径。例如，我有这个 JSON 文件，其中包含有关 Kylie Jenner 和 Kim Kardashian 的信息。因此，当我单击 Kylie Jenner 的个人资料时，我希望从 JSON 文件中提取数据，并且只提取 Kylie 的数据并将该数据显示在我设置为“分析页面”的另一个页面上。

[ 
{
    "id": 1,
    "title": "Kylie Jenner",
    "content": "Social Media Public Figure",
    "disclaimer": "*Disclaimer: This user could have comment filtering turned on",
    "slug": "hello-world",
    "img" : "https://ilarge.lisimg.com/image/16801290/1080full-kylie-jenner.jpg"
},
{
    "id": 2,
    "title": "Kim Kardashian",
    "content": "Social Media Public Figure",
    "disclaimer": "*Disclaimer: This user could have comment filtering turned on",
    "slug": "hello-world",
    "img" : ""
}

]

另一位名人如金卡戴珊也是如此。因此，当我单击 Kim 的个人资料时，只会从 JSON 文件中提取她的数据。一旦被拉出，我希望它显示在我在下面设置的“分析页面”上。

import React, { Component } from 'react'



export class Analysis extends Component {
render() {
    return (
        <div>
           
        </div>
    )
}
}

export default Analysis

我相信我必须设置一个 onClick 函数，但我只是对如何/在何处设置该 onClick 函数以获取特定数据感到困惑。然后路由配置文件并将其显示到另一个页面上。如果有人可以指导我或提出更简单的方法，请告诉我。将不胜感激。

标签： jsonreactjsgetdisplay

解决方案

You need to use react-router-dom to pass the celebrity name (title in your case) in props. Then, in your Analysis page, with the props you retrieve the associated informations from your database.

Check my demo here : https://stackblitz.com/edit/react-gkpswn?file=src%2FApp.js

ProfileItems.js

// Link to analysis route with title in props
<Link to={`/analysis/${title}`}>

App.js

// Route to analysis page/component with title props
<Route path="/analysis/:title" render={props => <Analysis {...props} />} />

Analysis.js

  // Get the props with useParams (react-router-dom)
  const { title } = useParams();

  // filter data to get informations based on props "title"
  const profile = Data.filter(profile => profile.title === title);

推荐阅读