web-dev-qa-db-ja.com

Material-UIのマスクテキストフィールドコンポーネント

TextFieldコンポーネントにマスクを適用しようとしていますが、成功しません。

私はすでに この解決策 を試しましたが、うまくいきませんでした。私はあらゆる方法を試しましたが、もううまくいかないようです。

私は ドキュメントに記載されている指示に従います を試みましたが、それらは入力コンポーネントを使用しており、このコンポーネントが私の設計を壊しています。

誰かがTextFieldコンポーネントをマスクする方法を知っていますか？ material-ui 1.0.0-beta.24を使用しています

javascriptreactjsfrontendmaterial-ui
6
Eduardo Lima

InputPropsを使用して、TextFieldコンポーネントに直接マスクを設定します。たとえば、目的のマスクがTextMaskCustomコンポーネントで表されているとします。次に、Inputに直接適用する代わりに、TextFieldを使用してInputPropsに次のように適用できます。

<TextField
  id="maskExample"
  label="Mask Example"
  className={classes.textField}
  margin="normal"
  InputProps={{
    inputComponent: TextMaskCustom,
    value: this.state.textmask,
    onChange: this.handleChange('textmask'),
  }}
/>

これが機能するのは、TextFieldが実際には Inputコンポーネントのラッパー であるからです（他のものが混在しています）。 InputPropsのTextFieldプロパティを使用すると、内部Inputにアクセスできるため、TextFieldコンポーネントのスタイルを維持しながら、マスクをそのように設定できます。

ドキュメント内のデモ から変更された完全に機能する例を次に示します。

import React from 'react';
import MaskedInput from 'react-text-mask';
import PropTypes from 'prop-types';
import { withStyles } from 'material-ui/styles';
import TextField from 'material-ui/TextField';

const styles = theme => ({
  container: {
    display: 'flex',
    flexWrap: 'wrap',
  },
  input: {
    margin: theme.spacing.unit,
  },
});

const TextMaskCustom = (props) => {
  const { inputRef, ...other } = props;

  return (
    <MaskedInput
      {...other}
      ref={inputRef}
      mask={['(', /[1-9]/, /\d/, /\d/, ')', ' ', /\d/, /\d/, /\d/, '-', /\d/, /\d/, /\d/, /\d/]}
      placeholderChar={'\u2000'}
      showMask
    />
  );
}

TextMaskCustom.propTypes = {
  inputRef: PropTypes.func.isRequired,
};

class FormattedInputs extends React.Component {
  state = {
    textmask: '(1  )    -    ',
  };

  handleChange = name => event => {
    this.setState({
      [name]: event.target.value,
    });
  };

  render() {
    const { classes } = this.props;
    return (
      <div className={classes.container}>
        <TextField
          id="maskExample"
          label="Mask Example"
          className={classes.textField}
          margin="normal"
          InputProps={{
            inputComponent: TextMaskCustom,
            value:this.state.textmask,
            onChange: this.handleChange('textmask'),
          }}
        />
      </div>
    );
  }
}

FormattedInputs.propTypes = {
  classes: PropTypes.object.isRequired,
};

export default withStyles(styles)(FormattedInputs);
8
Jules Dupont