Question

我正在尝试在TextField组件中应用蒙版，但是我没有成功。

我已经尝试了this solution但没有奏效。我尝试了各种方式，但似乎不再工作了。

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

任何人都知道掩盖TextField组件的方法吗？我正在使用material-ui 1.0.0-beta.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实际上是wrapper around an Input component（其他一些东西混合在一起）。 InputProps的{{1}}道具可让您访问内部TextField，因此您可以在保留Input组件样式的同时设置掩码。

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

TextField

在Material-UI中屏蔽Textfield组件

1 个答案: