如何在 React.js 中使用 onClick() 事件将道具从一个组件传递到另一个组件

Question

需要快速帮助！我有两个 React 组件 Vendors 和 VendorsList。在 Vendors.js 组件中，我有 asset.asset_name 以表格格式呈现的文本。我想要的是，当我点击我的 asset.asset_name 时，我想将它的值从 Vendors 组件传递给 VendorsList 组件。我怎么能这样做？

这是两个组件的代码

Vendors.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;

这里是 VendorsList.js

    import React from "react";
const VendorsList = () => {
  return (
    <div>
      <h1>{foo}</h1>
    </div>
  );
};

export default VendorsList;

当我点击 Vendors 中的 asset.asset_name 值时，我需要将 asset.asset_name 值传递给 VendorsList强>组件

Answer 1

我认为您根本没有将 asset_name 传递到您的 VendorsList 组件中。我认为最快的方法是直接在你的Vendors 组件中渲染VendorsList，方法是将它放在你的Vendors 组件的返回中。您还需要一些东西来记录您单击的内容，以便您可以为此使用另一个 useState。以下是您如何实现这一目标：

将您的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;

然后要使用您刚刚传递的clickedAssetName，在您的VendorsList.js 组件中像这样访问它：

import React from "react";
const VendorsList = ({clickedAssetName}) => {
  return (
    <div>
      <h1>{clickedAssetName}</h1>
    </div>
  );
};

export default VendorsList;