Я хочу создать элемент TextField для обработки числовых полей. Я хочу динамически обрабатывать этот компонент, чтобы он помог мне не только управлять форматами кредитных карт, телефон и т. Д. c. Я использую библиотеку формата ответа-числа так же, как пример 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>
);
}
}