React-Admin - 向 TextField 添加显示/隐藏属性？答案

【问题标题】：React-Admin - Add a show/hide property to TextField?React-Admin - 向 TextField 添加显示/隐藏属性？
【发布时间】：2019-07-31 17:24:59
【问题描述】：

我是 React 新手。我有一个“显示”页面的区域，例如：

export default (props) => (
<Show title={<Title/>}{...props}>
    <TabbedShowLayout>
      <Tab label="Details">
        <TextField source="id" label="ID"/>
      </Tab>
    </TabbedShowLayout>
  </Show>

在那个 TextField 上，是否可以导入和使用与 PasswordMask 基本相同的效果来在 TextField 上获得该功能？我看到一堆关于构建自定义东西的教程，但我在这里寻找最好的 OOTB 方法。我意识到我的一些 React 术语可能不正确，而且对于有经验的框架用户来说，这个问题可能看起来很荒谬。

【问题讨论】：

TextField 是您创建的组件还是来自Material-UI？如果它来自Material-UI，那么您可以将prop type="password" 传递给它，这应该会掩盖您想要的文本。
它来自import { TextField } from 'react-admin';，添加type="password"似乎没有任何变化。
在此处添加source="password" type="password". That should work according to the documentation. Check the TabbedShowLayout`组件marmelab.com/react-admin/Show.html
在上面的示例中，我希望将逻辑应用于显示 ID 的 TextField，其中源仍为 source="id"。这仍然可行吗？
我认为它应该仍然可行。除非他们的 API 发生变化，否则我想说最重要的是type。

标签： reactjs react-admin

【解决方案1】：

假设您的 <TextField> 组件是由您使用 <input> html 标记而不是 <textarea> 实现的，您可以使用 TextField 组件的状态在 <input type="text"... 到 <input type="password"... 之间切换，例如<input type={this.state.showPassword ? 'text' : password'}...

【讨论】：