gpt4 book ai didi

reactjs - 如何使用 MaterialTable 屏蔽密码

转载 作者:行者123 更新时间:2023-12-03 21:01:51 31 4
gpt4 key购买 nike

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

最佳答案

目前,material-table 不支持自定义密码字段。
我能够在 https://gitter.im/material-table/Lobby?at=5ebbf9c82cf0da0ad9fda27c 上挽救解决方案( Material 表的聊天大厅)
简而言之,您的密码列需要添加其他属性(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 组件,在编辑行时输入“密码”以隐藏该值。

关于reactjs - 如何使用 MaterialTable 屏蔽密码,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/56939789/

31 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com