抓取行数据单击material-table中的字段

Question

import MaterialTable from "material-table";
import ShipmentContext from "../context/ShipmentContext";

const ItemsTable: React.FC = () => {
  const shipmentcontext = useContext(ShipmentContext);

  const { filtered } = shipmentcontext.State;

  return (
    <>
      <div style={{ width: "100%", overflowY: "hidden" }}>
        <MaterialTable
            options={{
            search: false,
            showTitle: false,
            toolbar: false,
            paging: false,
            padding: "dense",
            maxBodyHeight: "400px",
            minBodyHeight:"400px",
            paginationType: "stepped",
            tableLayout: "fixed"
          }}
          columns={[
            { title: "AWB NUMBER", field: "awbno" ,},
            { title: "TRANSPORTER", field: "carrier" },
            { title: "SOURCE", field: "from" },
            { title: "DESTINATION", field: "to" },
            { title: "BRAND", field: "carrier" },
            { title: "START DATE", field: "pickup_date" },
            { title: "ETD", field: "" },
            {
              title: "STATUS",
              field: "current_status",
              cellStyle: {
                color: "green",
              },
            },
          ]}
          data={filtered}
        />
      </div>
    </>
  );
};

export default ItemsTable;

我想要收集我在row.As上点击的字段的数据，这里的数据是动态的，我无法创建onClick方法来获取在行中被点击的对象。

我的表格看起来像这样：

table

我想要一个onClick方法，当我点击任何AWB号码时，它会抓取它的数据

Answer 1

您可以为此使用自定义render函数来添加一个自定义onClick处理程序，如下所示：

columns={[
            { title: "AWB NUMBER", field: "awbno" , render: row => <div onClick={() => console.log(row.awbno)}>{row.awbno}</div>}, // This will be called if this cell is clicked
            { title: "TRANSPORTER", field: "carrier" },
            { title: "SOURCE", field: "from" },
            { title: "DESTINATION", field: "to" },
            { title: "BRAND", field: "carrier" },
            { title: "START DATE", field: "pickup_date" },
            { title: "ETD", field: "" },
            {
              title: "STATUS",
              field: "current_status",
              cellStyle: {
                color: "green",
              },
            },
          ]}