如何屏蔽我的 Material-UI 文本字段？

Question

我有一个简短的电话号码文本字段。然后我想屏蔽这个表单字段，如 (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 进行遮罩的文档。我试图弄清楚如何与其他插件一起使用。

原文由 Batuhan Tozun 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

更新

版本：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>

演示：

原文由 Kuf 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

对于当前版本的 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>

原文由 Sylvester 发布，翻译遵循 CC BY-SA 4.0 许可协议