我有一个简短的电话号码文本字段。然后我想屏蔽这个表单字段，比如 (0)xxx xxx xx xx。
我正在尝试将react-input-mask插件与Material-UI 一起使用。但是如果我想更改输入值，这不会更新我的主要 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>
演示：
对于当前版本的 Material-UI 和 react-input-mask，以下答案有效：
<InputMask
mask="(1)999 999 9999"
value={self.state.inputValue}
onChange={this.getTextFieldValue}
className={this.props.classes.textField}
>
{() => <TextField
id={attribute}
label={attribute}
name={attribute}
className={this.props.classes.textField}
margin="normal"
type="text"
/>}
</InputMask>
这是有效的当前版本react-input-mask和material-ui：
<InputMask
mask="(0)999 999 99 99"
value={this.state.phone}
onChange={this.onChange}
>
{() => <TextField />}
</InputMask>
问题：
Codesandbox.io/s/q8v1259oq6请检查此我的标签测试floatingLabelText 是隐藏的 我如何解决。– 蒂莉娜·桑帕斯
解决方法：
您可以使用“floatingLabelFixed”props控制标签位置。在您的 handleChange 中查看状态输入值。
...当创造value时：
constructor(props) {
super(props);
let value = props && props.value ? props.value : '';
let floatingLabelFixed = !!value;
this.state = {
value,
floatingLabelFixed,
};
this.handleChange = this.handleChange.bind(this);
}
...编辑时（onChange）：
handleChange(event) {
let value = event && event.target && event.target.value ? event.target.value : '';
let floatingLabelFixed = !!value;
this.setState({
value,
floatingLabelFixed
});
}
...您的输入：
<TextField
onChange={this.handleChange}
value={this.state.value}
floatingLabelFixed={this.state.floatingLabelFixed}/>