Компонент "Маска текстового поля" в Material-UI

Question

Я пытаюсь применить маску в компоненте TextField, но я безуспешно.

Я уже пробовал это решение, но не сработало. Я старался изо всех сил, но, похоже, больше не работает.

Я пытался следовать инструкциям, приведенным в документации, но они используют компонент ввода, и этот компонент нарушает мой дизайн.

Кто-нибудь знает способ замаскировать компонент TextField? Я использую материал-UI 1.0.0-бета.24

Answer 1

Использование 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);