如何掩盖我的Material-UI TextField? [英] How Can I Mask My Material-UI TextField?
本文介绍了如何掩盖我的Material-UI TextField?的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我有一个简短的电话号码文本字段.然后我想屏蔽此表单字段,例如(0)xxx xxx xx xx.
I have a TextField for phone numbers in a short form. And then i want to mask this form field like (0)xxx xxx xx xx.
我正在尝试将 react-input-mask 插件与材料UI .但是,如果我想更改输入值,则不会更新我的主TextField.
I'm trying to use react-input-mask plugin with Material-UI. But if i want to change input value, this is not updating the my main 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遮罩的任何文档.我试图弄清楚如何与其他插件一起使用.
Actually, I couldn't find any documentation for masking with Material-UI. I'm trying to figure out how can i use with another plugins.
推荐答案
更新
版本:material-ui 0.20.2,react-input-mask 2.0.4
Update
versions: 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>
演示
这应该可以解决问题:
<TextField
ref="phone"
name="phone"
type="text"
value={this.state.phone}
onChange={this.onChange}
>
<InputMask mask="(0)999 999 99 99" maskChar=" " />
</TextField>
演示:
这篇关于如何掩盖我的Material-UI TextField?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文