如何通过 <td> 元素中的 onClick 访问行的数据？

Question

在下面显示的 Users.jsx 文件中，我使用存储在 userList 数组中的数据填充 table。我在 table 数据单元格元素中实现了一个 onClick 侦听器，我希望使用单击的行的信息对象调用 Trigger 函数。或者我希望能够在触发器函数中访问点击行的数据。

import React from 'react';
import '../../node_modules/bootstrap/dist/css/bootstrap.min.css'
import Navbar from "../components/NavBar";
import { Table } from 'react-bootstrap';

function Users() {

  let userList = [
    {'name': 'Jack',
    'age': 21,
    'role': 'Customer',
    },
    {'name': 'Tom',
    'age': 22,
    'role': 'Product Manager',
   }]

   const Trigger = () => {
     // Here
   }
  
  const UserData = userList.map(
    (info)=>{
      return(
          <tr>
          <td>{info.name}</td>
          <td>{info.age}</td>
          <td>{info.role}</td>
          <td onClick={Trigger}> Visit Profile  </td>
        </tr>
      )
    }
  )

  return(
    <div>
      <Navbar/>
      <div>
        <div className="row">
          <div className="col-md-8 offset-md-2">
            <Table striped bordered hover responsive="md">
                <thead>
                    <tr>
                    <th>NAME</th>
                    <th>AGE</th>
                    <th>ROLE</th>
                    <th>PROFILE</th>
                    </tr>
                </thead>
                <tbody>
                    {UserData}                    
                </tbody>
            </Table>
            </div>
            </div>
      </div>
    </div>
  )

}

export default Users;

非常感谢（在此上下文中需要的事件处理程序）的解决方案或文档建议的任何帮助。

Answer 1

function Users() {

  let userList = [
    {'name': 'Jack',
    'age': 21,
    'role': 'Customer',
    },
    {'name': 'Tom',
    'age': 22,
    'role': 'Product Manager',
   }]

   const Trigger = (info) => {
    // info it's user obj
   }
  
  const UserData = userList.map(
    (info)=>{
      return(
          <tr>
          <td>{info.name}</td>
          <td>{info.age}</td>
          <td>{info.role}</td>
          <td onClick={()=>{Trigger(info)}}> Visit Profile  </td>
        </tr>
      )
    }
  )

  return(
    <div>
      <Navbar/>
      <div>
        <div className="row">
          <div className="col-md-8 offset-md-2">
            <Table striped bordered hover responsive="md">
                <thead>
                    <tr>
                    <th>NAME</th>
                    <th>AGE</th>
                    <th>ROLE</th>
                    <th>PROFILE</th>
                    </tr>
                </thead>
                <tbody>
                    {UserData}                    
                </tbody>
            </Table>
            </div>
            </div>
      </div>
    </div>
  )

}

export default Users;

Answer 2

箭头函数调用可以完成这项工作：

   let userList = [
    {'key': 1,
    'name': 'Jack',
    'age': 21,
    'role': 'Customer',
    },
    {'key': 2,
    'name': 'Tom',
    'age': 22,
    'role': 'Product Manager',
   }]

   const Trigger = (info) => {
     // Here
     console.log(`Name is: ${info.name}, Age: ${info.age}, Role: ${info.role}`)
   }
  
  const UserData = userList.map(
    (info)=>{
      return(
          <tr key={info.key}>
          <td>{info.name}</td>
          <td>{info.age}</td>
          <td>{info.role}</td>
          <td onClick={() => Trigger(info)}> Visit Profile  </td>
        </tr>
      )
    }
  )

P.S 我已将键添加到列表中以避免警告..

如何通过 <td> 元素中的 onClick 访问行的数据？

How to access row's data via onClick in <td> element?

reactjs

bootstrap-table