如何通过使用 Id 单击删除按钮来删除 post？

Question

         cancelUserApplication(){

        }

如何让这个按钮获取我想要的 post 的 ID？

如果这对你很重要，我正在与 MySQL 和 Axios 合作。

 export default class Aplications extends React.Component {

  state = {
applications: [],
deletePostId:0
}
}

         cancelUserApplication(){

        }
    render() {
       <div>
    <Card className="post">
      <CardBody>
        <CardTitle> @company-Username</CardTitle>
        <CardSubtitle>Company Name : {job.companyId}</CardSubtitle>
        <CardText>Job Title : {job.jobTitle}</CardText>
      </CardBody>
      <CardImg
        width="100%"
        src="https://reactstrap.github.io/assets/318x180.svg"
        alt="company image"
      />
      <CardBody>
        <CardLink className="postButton" href="#">
          cancel
        </CardLink>
        <CardLink
          onClick={this.openModal.bind(this)}
          className="postButton"
          href="#"
        >
          View more
        </CardLink>
      </CardBody>
    </Card>
    {/* create modal to show more info */}
    <Modal isOpen={this.state.modalIsopen}>
      <ModalHeader toggle={this.toggleModal.bind(this)}>
        {job.jobTitle}
      </ModalHeader>
      <ModalBody>{job.Description}</ModalBody>
      <ModalFooter>
        <Button onClick={this.cancelUserApplication.bind(this)} color="danger">Cancel Application </Button>
        <Button onClick={this.closeModal.bind(this)} color="secondary">
          Close
        </Button>
      </ModalFooter>
    </Modal>
  </div>
));
return (
  <div>
    {listAppli}
  </div>
);

} }

Answer 1

我很难弄清楚你的组件是做什么的。您同时实现了 render 和 return。对于你拥有的 class-based 组件，你应该只实现 render.

回到最初的问题，您可以通过将 id 作为参数传递来以类似的方式实现它：

<Button onClick={() => this.cancelUserApplication(userId)}  color="danger">Cancel Application </Button>

然后在你的函数中：

function cancelUserApplication(userId) {
  // do stuff; userId is available as a variable
}

更新 1

我添加了使用 React Hooks 的示例：

import React, { useState } from "react";

export default function App() {
  const [items, _] = useState([{ id: 3 }, { id: 2 }, { id: 1 }]);

  function printItemId(id) {
    console.log(items[id]);
  }
  return (
    <div className="App">
      <h3>My items:</h3>
      {items.map((item) => (
        <button onClick={() => printItemId(item.id)}>Print item ID!!</button>
      ))}
    </div>
  );
}

如何通过使用 Id 单击删除按钮来删除 post？

How you can remove post by clicking on delete button using Id?

javascript

mysql

database

crud

axios