reactjs - 从 MUIDataTable 自定义搜索中的对象搜索

Question

我有一些列，其中行是customBodyRender我的MUIDataTable，所以它不是字符串类型。因此，我为我的表创建了一个自定义搜索。但是在下面的示例中，当我过滤 a 时，它不会搜索（返回行）unitName。

例如，搜索103应该返回第二行，因为它是单位名称，但它不会返回任何内容。 https://codesandbox.io/s/async-glitter-8t1i5?file=/src/App.js:0-2109 沙盒链接来玩弄代码。

import React, { useState, useEffect } from "react";
import MUIDataTable from "mui-datatables";
import MatButton from "@material-ui/core/Button";

const Test = () => {
  const [data, setData] = useState([]);

  useEffect(() => {
    const arr = [
      { id: 1, unitName: "101", name: "ABC Test", email: "[e-mail]" },
      { id: 2, unitName: "103", name: "Gabriel", email: "[e-mail]" },
      { id: 3, unitName: "104", name: "Mary", email: "[e-mail]" },
      { id: 4, unitName: "302", name: "Robert", email: "" }
    ];
    let arrData = [];
    for (const a of arr) {
      arrData.push({
        unit: a,
        name: a.name,
        email: a.email
      });
    }
    setData(arrData);
  }, []);

  const columns = [
    {
      name: "unit",
      label: "Unit",
      options: {
        customBodyRender: (value) => {
          return (
            <MatButton
              color="primary"
              onClick={() => {
                alert(value.id);
              }}
            >
              {value.unitName}
            </MatButton>
          );
        }
      }
    },
    { name: "name", label: "Name" },
    {
      name: "email",
      label: "Email",
      options: {
        customBodyRender: (value) => {
          return <a href={`mailto:+${value}`}>{value}</a>;
        }
      }
    }
  ];

  const options = {
    filterType: "dropdown",
    pagination: false,
    selectableRows: "none",
    customSearch: (searchQuery, currentRow, columns) => {
      currentRow.map((element) => {
        if (element === null) return false;
        if (typeof element === "object") {
          if (element.unitName.toString().trim().includes(searchQuery))
            return true;
          if (element.email.toString().includes(searchQuery)) return true;
        } else {
          if (element.toString().includes(searchQuery)) return true;
        }
        return false;
      });
    }
  };

  return (
    <div>
      <MUIDataTable
        title={"Test"}
        data={data}
        columns={columns}
        options={options}
      />
    </div>
  );
};

export default Test;

谢谢

标签： reactjsmui-datatable