如何屏蔽我的材质-UI TextField？

Question

我有一个简短形式的电话号码TextField.然后我想掩盖这个表单字段,如(0)xxx xxx xx xx.

我正在尝试使用react -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屏蔽的文档.我试图找出如何使用其他插件.

Answer 1

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

Answer 2

这应该做的伎俩:

<TextField
  ref="phone"
  name="phone"
  type="text"
  value={this.state.phone}
  onChange={this.onChange}
>
  <InputMask mask="(0)999 999 99 99" maskChar=" " />
</TextField>

演示: