如何屏蔽我的 Material-UI TextField？

Question

我有一个用于 phone 数字的简短格式的 TextField。然后我想像 (0)xxx xxx xx xx 一样屏蔽这个表单字段。

我正在尝试使用 react-input-mask plugin with 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 进行屏蔽的文档。我想弄清楚如何与其他插件一起使用。

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>

演示：

Answer 2

问题：

codesandbox.io/s/q8v1259oq6 please check this my label test floatingLabelText is hidden How I solve. – Thilina Sampath

解决方法：

您可以使用 "floatingLabelFixed" 属性控制标签位置。在您的 handleChange 中查看状态输入值。

...当创建值时：

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}/>

Answer 3

这对 react-input-mask 和 material-ui 的当前版本有效：

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

Answer 4

对于 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 5

<InputMask 
 mask="99999" // Format you need implemented
 value={cellNumber}
 onChange={this.inputHandler}
 placeholder="Cell Number"
 name="cellNumber" 
 required disableUnderline 
 style={style.inputfeild} 
 maskChar= {'_'}> // To display when there is no character typed

 {(inputProps) =>
  <Input {...inputProps}/>}

 </InputMask>

只需将所有道具提供给 InputMask，然后将它们作为输入道具传递给显示文本字段或输入字段的回调方法，它应该可以正常工作。

如何屏蔽我的 Material-UI TextField？

How Can I Mask My Material-UI TextField?

input-mask

reactjs

material-ui

更新

原创