如何屏蔽我的Material-UI TextField?

巴图汉·托尊

我有一个简短的电话号码文本字段。然后,我想屏蔽此表单字段,例如(0)xxx xxx xx xx。

我正在尝试对Material-UI使用react-input-mask插件但是,如果我想更改输入值,则不会更新我的主TextField。

        <TextField
          ref="phone"
          name="phone"
          type="text"
          value={this.state.phone}
          onChange={this.onChange}
        >
          <InputMask value={this.state.phone} onChange={this.onChange} mask="(0)999 999 99 99" maskChar=" " />            
        </TextField>

实际上,我找不到用于Material-UI遮罩的任何文档。我试图弄清楚如何与其他插件一起使用。

库夫

更新资料

版本:material-ui 0.20.2,react-input-mask 2.0.4

好像API有所改变:

<InputMask
  mask="(0)999 999 99 99"
  value={this.state.phone}
  disabled={false}
  maskChar=" "
>
  {() => <TextField />}
</InputMask>

演示版

编辑throbbing-bird-9qgw9

原版的

这应该可以解决问题:

<TextField
  ref="phone"
  name="phone"
  type="text"
  value={this.state.phone}
  onChange={this.onChange}
>
  <InputMask mask="(0)999 999 99 99" maskChar=" " />
</TextField>

演示:

编辑yl8p9jvq9

本文收集自互联网,转载请注明来源。

如有侵权,请联系 [email protected] 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章

如何从material-ui TextField,DropDownMenu组件获取数据?

如何在Material UI中使TextField无效

如何更改Material-UI <TextField />的边框颜色

如何使用Material-ui @ next TextField错误道具

使用React Material-UI自动聚焦TextField

如何使用React Jest测试TextField Material-UI元素?

在React中设置Material UI的TextField组件的defultValue

如何从Material UI获取TextField的输入值?

ReactJS,material-ui TextField onChange不起作用

Material-UI-TextField-以编程方式选择文本

React:如何使用Material-ui在Selects中添加Textfield?

React Material UI更新TextField值

Material-UI:如何使用TextField应用输入属性

React:如何从Material-UI TextField组件获取值

如何清除Materal UI的TextField

如何从Material-UI删除TextField的下划线?

删除Material UI的TextField中的向上和向下箭头

更改Material-UI TextField上的边框颜色

如何通过单击按钮伪造对Material-ui TextField的关注?

如何更改Material-UI <TextField />的标签颜色

如何将Radio组与Material UI中的TextField对齐?

Material UI:如何垂直居中 TextField 和 ButtonGroup

如何屏蔽 Material-ui FilledInput

Material-UI Multiline TextField 水平滚动

Material UI TextField type='search':如何替换/修改“清除”图标?

如何从 Material UI TextField 中删除箭头图标

React Material UI TextField 悬停鼠标图标

如何在 Material UI 中将按钮附加到 TextField

如何更改 Material-ui 中的 TextField 悬停边框效果?