javascript - 如何提取单元格单击grid.js的数据

Question

我正在使用 Grid.js 在反应中呈现表格。我需要提取其中一个单元格中的数据。当我映射 args 时，我得到两个结果......一个 MouseEvent 和 'n' 包含我需要的数据。如何从“n”结果中提取数据？下面是我从图片下方的当前代码中收到的图像。

import React, { useState, useEffect, useRef, Fragment } from 'react';
import axios from 'axios';
import { API } from '../../config';
import Layout from '../../components/Layout';
import { Grid, html, h } from 'gridjs';
import 'gridjs/dist/theme/mermaid.css';

const PendingUser = () => {
  const [pendingUser, setPendingUser] = useState({});

  const wrappedRef = useRef(null);

  useEffect(() => {
    getPendingUsers();
    setPendingUser(pendingUser);
    grid.render(wrappedRef.current);
  }, []);

  const getPendingUsers = async () => {
    const { data } = await axios.get(`${API}/admin/pendinguser`);
    await data.filter(user => {
      user.accountApproved ? setPendingUser(user) : setPendingUser();
    });
  };

  const handleClick = e => {
    e.preventDefault();
    const buttonValue = e.target.value;
    console.log(buttonValue);
    grid.on('rowClick', (...args) =>
      args.map(data => {
        console.log(data);
      })
    );
  };

  const grid = new Grid({
    search: true,
    columns: [
      {
        name: 'ID',
        hidden: true
      },
      {
        name: 'First Name'
      },
      {
        name: 'Last Name'
      },
      {
        name: 'Email'
      },
      {
        name: 'Agency'
      },
      {
        name: 'Approve',
        formatter: (cell, row) => {
          return h(
            'button',
            {
              style: 'cursor: pointer',
              className: 'py-2 mb-2 px-2 border rounded text-white bg-success',
              value: 'approve',
              onClick: e => handleClick(e, 'value')
            },
            'Approve'
          );
        }
      },
      {
        name: 'Deny',
        formatter: (cell, row) => {
          return h(
            'button',
            {
              styel: 'cursor: pointer',
              className: 'py-2 mb-2 px-2 border rounded text-white bg-danger',
              value: 'deny',
              onClick: e => handleClick(e, 'value')
            },
            'Deny'
          );
        }
      },
      {
        name: 'Denied Reason',
        formatter: (_, row) =>
          html(
            '<select>' +
              '<center><option value="Non Law Enforcement">Non Law Enforcement</option><option value="Non Law Enforcement">Non US Law Enforcement</option></center>' +
              '</select>'
          )
      }
    ],
    server: {
      url: `${API}/admin/pendinguser`,
      method: 'GET',
      then: data =>
        data.map(user => [
          user._id,
          user.firstName,
          user.lastName,
          user.email,
          user.leAgency
        ])
    }
  });

  return (
    <Layout>
      <div ref={wrappedRef} />
    </Layout>
  );
};

export default PendingUser;

这是“n”数据的样子，我圈出了我想要提取的内容。

Answer 1

columns: [{ name: 'Name',
attributes: (cell) => {
// add these attributes to the td elements only
if (cell) {
return {
'data-cell-content':cell,
'onclick': () => alert(cell)
};
}
}},

这对我有用，兄弟。