reactjs - 将道具发送到数字格式 - Material UI TextField
问题描述
我想创建一个 TextField 元素来处理数字字段。我想动态处理这个组件,这样它不仅可以帮助我管理信用卡格式、电话等。我使用 react-number-format 库的方式与 Material-UI 示例相同。我试图通过道具“前缀”和“格式”发送,但没有得到有利的结果。我想知道我应该如何发送这些属性,如果我有办法的话。提前致谢 !
function NumberFormatCustom(props) {
const { inputRef, onChange, ...other } = props;
return (
<NumberFormat
{...other}
getInputRef={inputRef}
onValueChange={values => {
onChange({
target: {
value: values.value
}
});
}}
thousandSeparator={","}
decimalSeparator={"."}
isNumericString
prefix={props.prefix} //"$"
/>
);
}
NumberFormatCustom.propTypes = {
inputRef: PropTypes.func.isRequired,
onChange: PropTypes.func.isRequired
};
class NumberTextField extends Component {
state = {
numberformat: this.props.value
};
handleChange = event => {
const targetField = this.props.name;
const targetValue = event.target.value;
this.setState({
...this.state,
numberformat: targetValue
});
this.props.updateCurrentUserFieldsOnChange(targetField, targetValue);
};
render() {
const { fullWidth, label, name, readOnly, prefix } = this.props;
return (
<Fragment>
<TextField
fullWidth={fullWidth ? fullWidth : true}
label={label ? label : "react-number-format"}
name={name}
value={this.state.numberformat}
onChange={this.handleChange}
InputProps={{
inputComponent: NumberFormatCustom,
readOnly: Boolean(readOnly),
prefix: prefix
}}
/>
</Fragment>
);
}
}
解决方案
您必须使用 customInput 道具,这将允许您集成 material-ui 的样式。你也可以通过几个道具来控制你想要的面具。此外,如果你想要一个前缀,只需使用前缀道具。千分隔符是一个布尔值,但默认情况下,数字用逗号分隔,如果你喜欢空格,你只需要像我的例子一样添加它
import NumberFormat from 'react-number-format';
import TextField from 'material-ui/TextField';
<NumberFormat
{...props}
value={value}
name={name}
mask={mask}
customInput={TextField}
prefix={'$'}
format={format || null}
type="text"
thousandSeparator={thousandSeparator ? ' ' : null}
onValueChange={({ value: v }) => onChange({ target: { name, value: v } })}
/>
推荐阅读
- html - 自动填充(登录凭据)在 IE11 和 Edge 中不起作用
- coq - 自然数列表的拆分
- ios - iOS 中的 Firebase 身份验证以及 Swift 5 的最新更新
- python - 使用 pandas python 在 excel 文件中获取不相关的日期并创建标题并添加评论,例如“日期不相关”
- reactjs - 部署到 azure 应用服务时反应无效的主机头错误
- python - 在 Python 中将两个空列表之间的所有列表(字符串列表)合并为一个列表
- loopbackjs - 模型中的环回数据源特定配置
- excel - 如何在 Wscript.Shell + cmd.exe 中使用变量?
- wordpress - WP火箭缓存问题
- kotlin - 过滤 val 变量而不更改其声明 Kotlin