Material-UI 中的 Mask Textfield 组件答案

【问题标题】：Mask Textfield component in Material-UIMaterial-UI 中的 Mask Textfield 组件
【发布时间】：2018-07-21 06:57:12
【问题描述】：

我正在尝试在 TextField 组件中应用掩码，但没有成功。

我已经尝试过this solution，但没有成功。我尝试了各种方法，但似乎不再起作用了。

我尝试follow the instructions given in docs，但他们使用了 Input 组件，而这个组件破坏了我的设计。

有人知道屏蔽 TextField 组件的方法吗？我正在使用material-ui 1.0.0-beta.24

【问题讨论】：

您能提供一些您正在使用的代码吗？另外，Input 组件如何破坏您的设计？
@julesDupont 当我使用输入组件时，它在视觉上与 TextField 组件有所不同。如您所见，this screenshot。代码真的有必要吗？如果是，我会发布。但它只是一堆 Grids 和 TextField 输入
可能不需要代码 - 当您说 Input 影响格式时，我只是不清楚您的意思。我给了你一个解决方案，应该允许你使用带有面具的TextField。

标签： javascript reactjs frontend material-ui

【解决方案1】：

使用InputProps 直接在TextField 组件上设置掩码。例如，假设您想要的掩码由TextMaskCustom 组件表示。然后，您可以使用InputProps 将其应用于您的TextField，而不是直接将其应用于Input，如下所示：

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

这是有效的，因为 TextField 实际上是 wrapper around an Input component（混入了其他一些东西）。 TextField 的 InputProps 属性使您可以访问内部 Input，因此您可以这样设置掩码，同时保留 TextField 组件的样式。

这是改编自 demos in the docs 的完整工作示例：

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);

【讨论】：

如何将自定义前缀作为道具传递给 inputComponent。例如，如果我想更改 NumberFormated 类型中 inputComponent 的货币符号
``` InputProps={{ inputComponent: TextMaskCustom, inputProps: {...} }} ``` 添加（小写） inputProps 让您可以传入用于您的 inputComponent 的道具。跨度>
如果您使用较新的 Material UI（使用 '@material-ui/core' 导入，那么您将收到此错误：“Material-UI: you have provided a inputComponent to the无法正确处理 inputRef 属性的输入组件。确保使用 HTMLInputElement 调用 inputRef 属性。”要解决此问题，请将 TextMaskCustom 中的 ref= 行更改为：ref={ref => { inputRef(ref ? ref.inputElement : null); }}