我有一个简短的电话号码文本字段。然后,我想屏蔽此表单字段,例如(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>
演示版
这应该可以解决问题:
<TextField
ref="phone"
name="phone"
type="text"
value={this.state.phone}
onChange={this.onChange}
>
<InputMask mask="(0)999 999 99 99" maskChar=" " />
</TextField>
演示:
本文收集自互联网,转载请注明来源。
如有侵权,请联系 [email protected] 删除。
我来说两句