如何在材料表 React 的警报或控制台中获取查找值？

Question

我在我的项目中使用材料表。 我想在警报或控制台中获取查找值。 我得到 63 或 32，而不是城市名称

代码沙盒： https://codesandbox.io/s/material-demo-forked-dhg3e?file=/demo.js

actions={[
        {
          icon: "save",
          tooltip: "Save User",
          onClick: (event, rowData) => alert("You saved " + rowData.birthCity)
        }
      ]}

Answer 1

那是因为您的birthCity实际上是指您的 state 数据中的一个数字。 您还有一个包含birthCity属性的查找值的列。

您可以通过以下方式查找数字城市的字符串值：

const lookup = { 34: "İstanbul", 63: "Şanlıurfa" };
....
const [state, setState] = React.useState({
    columns: [
      { title: "Name", field: "name" },
      { title: "Surname", field: "surname" },
      { title: "Birth Year", field: "birthYear", type: "numeric" },
      {
        title: "Birth Place",
        field: "birthCity",
        lookup: lookup
      }
    ],
    data: [
      { name: "Mehmet", surname: "Baran", birthYear: 1987, birthCity: 63 },
      {
        name: "Zerya Betül",
        surname: "Baran",
        birthYear: 2017,
        birthCity: 34
      }
    ]
  });
....
return (
    <MaterialTable
      title="Editable Example"
      columns={state.columns}
      data={state.data}
      editable={{
        onRowAdd: (newData) =>
          new Promise((resolve) => {
            setTimeout(() => {
              resolve();
              setState((prevState) => {
                const data = [...prevState.data];
                data.push(newData);
                return { ...prevState, data };
              });
            }, 600);
          }),
        onRowUpdate: (newData, oldData) =>
          new Promise((resolve) => {
            setTimeout(() => {
              resolve();
              if (oldData) {
                setState((prevState) => {
                  const data = [...prevState.data];
                  data[data.indexOf(oldData)] = newData;
                  return { ...prevState, data };
                });
              }
            }, 600);
          })
      }}
      actions={[
        {
          icon: "save",
          tooltip: "Save User",
          onClick: (event, rowData) => {
            alert("You saved " + lookup[rowData.birthCity]);
          }
        }
      ]}
    />
  );

请注意我是如何通过创建一个新变量 ( lookup ) 来查找城市的字符串值的，该变量包含与各自数字相关联的城市的字符串值，并使用所述变量来查找值，如下所示：

const lookup = { 34: "İstanbul", 63: "Şanlıurfa" };
...
lookup[rowData.birthCity];

现场演示：
https://codesandbox.io/s/material-demo-forked-w805r?file=/demo.js