[英]How to pass props from one Component to another component with onClick() event in React.js
Quick Help Needed!需要快速帮助! I have Two React components Vendors and VendorsList .
我有两个 React 组件Vendors和VendorsList 。 In Vendors.js Component i have asset.asset_name text rendered in table format.
在Vendors.js组件中,我将asset.asset_name文本以表格格式呈现。 What I want is, When I click on I asset.asset_name , I wanted to pass it's value from Vendors component to VendorsList component.
我想要的是,当我点击 I asset.asset_name时,我想将它的值从Vendors组件传递给VendorsList组件。 How could I do this?
我怎么能这样做?
Here is code for Two Components这是两个组件的代码
Vendors.js供应商.js
import React, { useEffect, useState } from "react";
import { axios } from "axios";
const Vendors = () => {
const [data, setData] = useState({});
const baseURL =
"http://127.0.0.1:8000/api/business_process/business-impact/bussiness-assets-detail";
useEffect(() => {
axios
.get(baseURL)
.then((response) => {
setData(response.data);
})
.then(
(response) => {},
(err) => {
alert("No Data To Show");
}
)
.catch((err) => {
return false;
});
}, []);
const DisplayData = data.business_assets?.map((asset) => {
return (
<tr>
<td>{asset.business_assets}</td>
<td onClick={() => alert(asset.asset_name)}>{asset.asset_name}</td>
</tr>
);
});
return <div></div>;
};
export default Vendors;
Here is VendorsList.js这是VendorsList.js
import React from "react";
const VendorsList = () => {
return (
<div>
<h1>{foo}</h1>
</div>
);
};
export default VendorsList;
I need asset.asset_name value to be passed to VendorsList when I click on asset.asset_name value from Vendors component当我单击Vendors组件中的asset.asset_name值时,我需要将asset.asset_name值传递给VendorsList
I don't think you're passing the asset_name
into your VendorsList
component at all.我认为您根本没有将
asset_name
传递到您的VendorsList
组件中。 I think the quickest way is to directly render the VendorsList
in your Vendors
component by putting it in the return of your Vendors
component.我认为最快的方法是直接在
Vendors
组件中呈现VendorsList
,方法是将其放入Vendors
组件的返回中。 You would also need something to record what you have clicked so you can use another useState
for this.您还需要一些东西来记录您单击的内容,以便您可以为此使用另一个
useState
。 Below is how you'd achieve this:以下是您如何实现这一目标:
Modify your Vendor.js
to look like this:将您的
Vendor.js
修改为如下所示:
import React, { useEffect, useState } from "react"; import { axios } from "axios"; import VendorsList from '<path to your VendorList component>' const Vendors = () => { const [data, setData] = useState({}); const [clickedAsset, setClickedAsset] = useState() const baseURL = "http://127.0.0.1:8000/api/business_process/business-impact/bussiness-assets-detail"; useEffect(() => { axios.get(baseURL).then((response) => { setData(response.data); }).then( (response) => {}, (err) => { alert("No Data To Show"); } ).catch((err) => { return false; }); }, []); const DisplayData = data.business_assets?.map((asset) => { return ( <tr> <td>{asset.business_assets}</td> <td onClick={() => setClickedAsset(asset.asset_name)}>{asset.asset_name}</td> </tr> ); }); return ( <div> <DisplayData/> <VendorList clickedAssetName={clickedAsset}/> </div> ); }; export default Vendors;
Then to use the clickedAssetName
that you just passed, access it like this in your VendorsList.js
component:然后要使用您刚刚传递的
clickedAssetName
,请在您的VendorsList.js
组件中像这样访问它:
import React from "react"; const VendorsList = ({clickedAssetName}) => { return ( <div> <h1>{clickedAssetName}</h1> </div> ); }; export default VendorsList;
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.