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.

从“物料表”导入物料表；
函数UserProfile（）{
常量[状态，设置状态]=React.useState({
栏目：[
{标题：“记录名称”，字段：“名称”}，
{
标题：“密码”，
字段：“密码”，
}
],
数据：[
{
姓名：“丹”，
密码：“TopseCrets@1"
}]
返回(
此时，“材质表”不支持自定义密码字段

我在（材料表的聊天大厅）上找到了解决方案

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

{
标题：“密码”，字段：“密码”，
render:rowData=>{rowData.password.split（''）.map（（）=>'*'）}
,，
editComponent:props=>(
props.onChange（e.target.value）}
/>)
},

显示字段时，“渲染”属性将替换字符

editComponent将使用您自己的TextField组件，在编辑行时键入“password”以隐藏值

        { 
        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)}
            />)
        },