如何将实例传递给reactjs中组件内的函数

Question

如果问题中使用的术语不正确，请与我一起，因为这是我第一次使用react JS。我通过参考大量的博客、youtube、文档等编写了一些代码，现在我被困住了，因为它是所有东西的混合体。

我需要对一个endpoint（关于.js组件）进行get调用，该endpoint返回json数据，这些数据将被传递给（workspace.js组件），在那里呈现和显示这些数据。到目前为止，它运行良好。

下一步，有一个链接'delete'（在workspace.js的cards元素中），点击后，它应该对一个带有project_name的endpoint发出post调用。这里我无法使它工作（与常量、函数等混淆）。

下面是代码：（about.js）

import React, { useState, useEffect } from "react";
import Card from "react-bootstrap/Card";
import "./About.css";
import axios from "axios";
import Account from "./Workspace";
function About() {
  const [resp_data, setdata] = useState("");

  useEffect(() => {
    const axios = require("axios");
    axios({
      method: "get",
      headers: { "Content-Type": "application/x-www-form-urlencoded" },
      url: "http://127.0.0.1:8000/api/projects/",
    })
      .then(function (response) {
        setdata(response);
      })
      .catch(function (error) {
        console.log(error);
      })
      .then(function () {});
  }, []);

  if (resp_data != "") {
    return (
      <div>
        <Account user={resp_data} />
      </div>
    );
  } else {
    return <h2>Loading...</h2>;
  }
}

export default About;

workspace.js

import React, { Component } from "react";
import Card from "react-bootstrap/Card";

const Account = (props) => {
  function handleClick(event) {
    alert(event);
    //need to get the project_name here
    //make post call to an endpoint with project_name as data
  }
  const users = props.user.data;
  return (
    <div>
      {users.map((user) => (
        <div className="card-rows">
          <Card className="card" key={user.Id}>
            <Card.Body>
              <Card.Title>
                <b>Project : </b>
                {user.project_name}
              </Card.Title>
              <Card.Subtitle className="mb-2 text-muted">
                <b>DataSet : </b>
                {user.dataset_name}
              </Card.Subtitle>
              <Card.Subtitle className="mb-2 text-muted">
                <b>DataType : </b>
                {user.data_type}
              </Card.Subtitle>
              <Card.Link
                href="#"
                name="hello"
                className="delete"
                onClick={this.handleClick({user.project_name})} // call handleclick and the projectname should be available within the function
              >
                Delete
              </Card.Link>
              <Card.Link href="/launch" className="launch">
                Launch
              </Card.Link>
            </Card.Body>
          </Card>
        </div>
      ))}
    </div>
  );
};
export default Account;

如果有人能帮忙，那将是一个很大的帮助

Answer 1

如果您在一个功能组件中，可以通过添加卷曲大括号来获得user道具。还要修改您的onclick。React onClick事件处理

如果开始的话，我建议您彻底阅读React文档。

这对你应该管用。

const Account = ({user}) => { 
//use curly braces around props to fetch user prop

function handleClick(project_name) {
    alert(project_name);
    //need to get the project_name here
    //make post call to an endpoint with project_name as data
}


return(
... //above code
<Card.Link
    href="#"
    name="hello"
    className="delete"
    onClick={() => handleClick(user.project_name)}  
>
    Delete
</Card.Link>
... //below
)