Question

我有一个用于创建表的子组件。在此表中，我每一行都有一些数据，删除和修改图标。例如，当我单击删除图标时，我需要将该项目的ID传递给父组件，其中函数将使用axios从数据库中删除该项目。我该如何提供这个ID？

孩子：

import React from 'react';
import './tableHasp.css';


class TableHasp extends React.Component {
  render(){
    return(
      <tr>
         <td>{ this.props.hasps._id}</td>
         <td>{ this.props.hasps.serial }</td>
         <td>{ this.props.hasps.soft }</td>
         <td>{ this.props.hasps.numberOfKeys }</td>
         <td>{ this.props.hasps.company.name }</td>
         <td>{ this.props.hasps.company.city }</td>
         <td>{ this.props.hasps.company.phone }</td>
         <td>{ this.props.hasps.dateCreated }</td>
         <td><a href="#formId"><i onClick={this.props.modifyEvent} className="far fa-edit btnEdit"></i></a></td>
         <td><i  onClick={this.props.delEvent} className="far fa-trash-alt btnDelete" ></i></td>
      </tr>
      );
  }
}

export default TableHasp;

将数据从父级传递到子级组件的代码：

<div className="container">
        <table className="table table-striped">
        <thead className="thead-dark">
          <tr>
            <th scope="col">id</th>
            <th scope="col">Serial Number</th>
            <th scope="col">Soft</th>
            <th scope="col">Number of Keys</th>
            <th scope="col">Company</th>
            <th scope="col">City</th>
            <th scope="col">Contacts</th>
            <th scope="col">Date Created</th>
            <th scope="col">Edit</th>
            <th scope="col">Delete</th>
          </tr>
        </thead>
         <tbody>
            {this.state.hasps.map((hasp, i) => 
            <TableHasp 
                 delEvent={this.deleteCurrentHaspInfo} 
                 modifyEvent={this.modifyCurrentHaspInfo}  
                 key={i} 
                 hasps={hasp} 
                 />)}
          </tbody>
         </table>
       </div>

这是我需要传递ID的函数：

deleteCurrentHaspInfo = (i) => {           
     if (confirm("Do you really want to delete this item from database?") === true){  //eslint-disable-line       
         if (prompt("Enter password:") === "123456") {
           axios.delete("/hasp/delete", {
            data: {
              _id: this.state.hasps[i]._id ///??????????
             // _id: this.state.hasps[5]._id    //this works
            }
           })
           .then((res) => {
            console.log(res.data);
           })
           .catch((err) => {
            console.log(err);
         })
         } else {
          alert("Wrong password!");
         }       
   } else {
     //alert("Delete Canceled!");
   }       
   }

Answer 1

在this.props.hasps._id组件的onClick event中添加TableHasp，

<td><i  onClick={() => this.props.delEvent(this.props.hasps._id)} className="far fa-trash-alt btnDelete" ></i></td>

Answer 2

您可以将deleteCurrentHaspInfo修改为高阶函数，并使用闭包来记住变量，使第一个函数采用id。

看起来像这样

deleteCurrentHaspinfo = (id) = () => {
  // ...
  axios.delete("...", data: {_id: id})
}

// and in your TableHasp component 
delEvent={this.deleteCurrentHaspInfo(hasp._id)}

deleteCurrentHaspInfo(hasp._id)创建了一个新函数，该函数通过闭包来记住ID。

签出MDN关于闭包的文章：https://developer.mozilla.org/en-US/docs/Web/JavaScript/Closures

JavaScript的高阶函数快速介绍：https://medium.freecodecamp.org/a-quick-intro-to-higher-order-functions-in-javascript-1a014f89c6b

如何将项目ID从子组件传递给父组件？

2 个答案: