如何在所有行中隱藏 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 />
    )
  }
];

這樣該字段不會被隱藏，但密碼只會在更新或創建期間顯示。 在此處鏈接到工作沙箱。

Answer 2

您可以使用 state 並將其傳遞給隱藏。