Material-UI中的Mask Textfield组件

Question

Material-UI中的Mask Textfield组件

javascriptreactjsfrontendmaterial-ui

11

我试图在TextField组件中应用掩码，但是一直没有成功。

我已经尝试了这个解决方案，但没有起作用。我试过各种方法，但好像都不再起作用了。

我尝试按照文档中给出的说明，但它们使用Input组件，而这个组件破坏了我的设计。

有人知道如何掩盖TextField组件吗？我正在使用material-ui 1.0.0-beta.24

- Eduardo Lima

你能提供一些你正在使用的代码吗？另外，Input 组件是如何破坏你的设计的？ - Jules Dupont

1

@julesDupont 当我使用输入组件时，从视觉上讲，它与TextField组件不同。正如您可以在此截图中看到的那样。代码真的很必要吗？如果需要，我会发布。但这只是一堆网格和文本字段输入。 - Eduardo Lima

可能不需要代码 - 当您说“输入”影响格式时，我并不清楚您的意思。我已经为您提供了一个解决方案，可以让您使用带有掩码的“TextField”。 - Jules Dupont

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Jules Dupont · Accepted Answer

使用 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 实际上是一个围绕着 Input 组件的包装器（其中还有其他一些混合内容）。TextField 的 InputProps 属性可以让您访问内部的 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);