web-dev-qa-db-ja.com

Material-UI TextFieldをマスクする方法は？

短い形式の電話番号用のTextFieldがあります。次に、このフォームフィールドを（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でマスキングするためのドキュメントは見つかりませんでした。別のプラグインでどのように使用できるかを理解しようとしています。

reactjsmaterial-uiinput-mask
10
Batuhan Tozun

これでうまくいくはずです：

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

デモ：

Edit yl8p9jvq9

5
Kuf

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>
14
Sylvester

これは、現在のバージョンのreact-input-maskおよびmaterial-uiで有効です。

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

質問：

codesandbox.io/s/q8v1259oq6 これを確認してください私のラベルテストfloatingLabelTextが非表示になっています解決方法– 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}/>
0
Rei Gelado