如何隐藏 REACT 材料表中所有行中的列，并在我正在编辑的特定行的编辑和添加新行时显示它？

Question

我正在使用 React Material Table。请协助我需要在所有行中默认隐藏密码列标题和字段，并在特定行的编辑中显示它，并且还用于添加新行。我使用了hidden: true属性，但我无法为我正在编辑的特定行显示它，也许我也可以只用星星显示它，例如：-Password********但我无法这样做。到目前为止，这是我的代码：-const [columns, setColumns] = useState<any>([    {      title: "Username",      field: "username",      draggable: false,      cellStyle: { textAlign: "left" },    },    {       title: "Password",       field: "password",       hidden: true,       draggable: false,       cellStyle: { textAlign: "left" },    },我只想为我正在编辑的特定行以及添加的新行显示它。

Answer 1

您可以在密码列定义上定义editComponent和render支持，如下所示：

  const tableColumns = [

   // ..other columns

  {

    title: "Password",

    field: "password",

    editComponent: ({ value, onChange }) => (

      <input

        type="text"

        value={value || ""}

        onChange={(e) => onChange(e.target.value)}

      />

    ),

    render: (rowData) => (

      <input

        type="password"

        value={rowData.password}

        readOnly />

    )

  }

];

这样，该字段不会被隐藏，但密码只会在更新或创建期间显示。