Question

我正在使用MaterialTable，并且想屏蔽列值，但是我不能这样做。

可以帮忙吗？

我正在使用MaterialTable向应用显示用户。

import MaterialTable from "material-table";

function UserProfile() {
  const [state, setState] = React.useState({
    columns: [
      { title: "Logging Name", field: "name" },
      {
        title: "password",
        field: "password",
      }
],

data: [
      {
        name: "Dan",
        password: "TopseCrets@1"
}]

return (
    <div style={{ maxWidth: "100%" }}>
      <MaterialTable
        title="User List"
        columns={state.columns}
        data={state.data}
.
.
.
);



I want to see ***** instead of password for the corresponding field, password string should be displayed only when I try to edit the row.

Answer 1

目前，材料表不支持自定义密码字段。

我能够在https://gitter.im/material-table/Lobby?at=5ebbf9c82cf0da0ad9fda27c（物料表的聊天室）上解决该问题

“密码”列的缩写，您想添加其他属性（render和editComponent）：

        { 
        title: 'Password', field: 'password',
        render: rowData => <p>{rowData.password.split('').map(() => '*')}</p>,
        editComponent: props => (
            <TextField
                type="password"
                value={props.value}
                onChange={e => props.onChange(e.target.value)}
            />)
        },

render属性将在显示字段时替换字符。

editComponent将使用您自己的TextField组件，其类型为“ password”以在编辑行时隐藏该值。

如何使用MaterialTable屏蔽密码

1 个答案: