Javascript 在材质UI中屏蔽Textfield组件

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

我已经试过了，但没有成功。我尝试了各种方法，但似乎不再有效

我试过了，但是他们使用了输入组件，这个组件破坏了我的设计

---

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

使用

InputProps

直接在

TextField

组件上设置掩码。例如，假设所需的掩码由

TextMaskCustom

组件表示。然后，您可以使用

InputProps

将其应用于

文本字段，而不是直接应用于
输入，如下所示：

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

你能提供一些你正在使用的代码吗？另外，
Input
组件是如何破坏您的设计的？@julesDupont当我使用输入组件时，从视觉上看，它与TextField组件有所不同。正如你所看到的那样。代码真的有必要吗？如果是的话，我会发帖的。但是它只是一堆网格和文本字段输入，可能不需要代码——我只是不清楚你说的
输入
影响格式时的意思。我为您提供了一个解决方案，允许您使用带掩码的
TextField
。如何将自定义前缀作为道具传递给inputComponent。例如，如果我想更改NumberFormatted类型``InputProps={{{inputComponent:TextMaskCustom，InputProps:{…}}}}``中inputComponent的货币符号，添加（小写）InputProps可以让您传入在inputComponent中使用的props。如果您使用的是较新的材质UI（使用“@material ui/core”导入时，您将收到此错误：“material ui:您向输入组件提供了一个
inputComponent
，该组件未正确处理
inputRef
属性。请确保使用htmlinputcelement调用
inputRef
属性。”要解决此问题，请将
TextMaskCustom
中的
ref=
行更改为：
ref={ref=>{inputRef（ref？ref.inputeelement:null）；}
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);