时间戳

首页 > 解决方案 > 如何使用 MaterialTable 屏蔽密码

reactjs - 如何使用 MaterialTable 屏蔽密码

问题描述

我正在使用 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.

标签： reactjsmaterial-ui

解决方案

目前，material-table 不支持自定义密码字段。

我能够在https://gitter.im/material-table/Lobby?at=5ebbf9c82cf0da0ad9fda27c（材料表的聊天大厅）上挽救解决方案

简而言之，对于您的密码列，您要添加其他属性（渲染和编辑组件）：

        { 
        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 组件，在编辑行时键入“密码”以隐藏值。

推荐阅读