我有一个简短形式的电话号码文本字段。然后我想屏蔽这个表单字段,例如 (0)xxx xxx xx xx。
我正在尝试使用 react-input-mask插件 Material-UI 。但如果我想更改输入值,这不会更新我的主文本字段。
<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 进行 mask 的文档。我正在尝试弄清楚如何与其他插件一起使用。
最佳答案
更新
版本: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>
演示:
关于reactjs - 如何屏蔽我的 Material-UI 文本字段?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/45758998/