Как передать идентификатор элемента из дочернего компонента в родительский?

Question

У меня есть дочерний компонент, где создается таблица.В этой таблице у меня есть в каждой строке некоторые данные, удалить и изменить значки.Когда я нажимаю, например, на иконку удаления, мне нужно передать идентификатор этого элемента в родительский компонент, где функция удалит этот элемент из базы данных с помощью axios.Как я могу предоставить этот идентификатор?

Child:

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>

А вот функция, где мне нужно передать идентификатор:

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

Вы можете изменить deleteCurrentHaspInfo на функцию более высокого порядка и заставить первую функцию взять id, используя замыкание для запоминания переменной.

Это будет выглядеть примерно так

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

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

Это значит, что deleteCurrentHaspInfo(hasp._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

Answer 2

Добавить 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>