[英]Mask Textfield component in Material-UI
I'm trying to apply a mask in a TextField component, but im without success.我正在尝试在 TextField 组件中应用掩码,但没有成功。
I already tried this solution but not worked.我已经尝试过这个解决方案,但没有奏效。 I tried every way but seems to not work anymore.
我尝试了各种方法,但似乎不再起作用。
I tried to follow the instructions given in docs but they use the Input component and this component is breaking my design.我试图按照文档中给出的说明进行操作,但他们使用了 Input 组件,而这个组件破坏了我的设计。
Anyone knows a way to mask the TextField component?有人知道屏蔽 TextField 组件的方法吗? I'm using material-ui 1.0.0-beta.24
我正在使用 material-ui 1.0.0-beta.24
Use InputProps
to set the mask directly on a TextField
component.使用
InputProps
直接在TextField
组件上设置掩码。 For example, suppose your desired mask is represented by the TextMaskCustom
component.例如,假设您想要的掩码由
TextMaskCustom
组件表示。 Then, instead of applying it to an Input
directly, you can apply it to your TextField
using the InputProps
like so:然后,您可以使用
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'),
}}
/>
This works because a TextField
is actually a wrapper around an Input
component (with some other things mixed in).这是有效的,因为
TextField
实际上是Input
组件的包装器(混合了其他一些东西)。 The InputProps
prop of the TextField
gives you access to the internal Input
, so you can set the mask that way while preserving the styling of the TextField
component. TextField
的InputProps
使您可以访问内部Input
,因此您可以在保留TextField
组件样式的同时以这种方式设置掩码。
Here's a full working example adapted from the 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);
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.