您知道如何将货币从前缀'$'静态字符串更改为动态字符串，并将其作为道具传递给MaskedInput组件吗？ 稍后，我将有一个更改货币按钮，我希望用户看到他选择的货币进入输入。
const defaultMaskOptions = {
prefix: '$',
suffix: '',
includeThousandsSeparator: true,
thousandsSeparatorSymbol: '',
allowDecimal: true,
}
const CurrencyInput = ({ maskOptions, ...inputProps }) => {
const currencyMask = createNumberMask({
...defaultMaskOptions,
...maskOptions,
})
return <MaskedInput mask={currencyMask} {...inputProps} />
}
您需要创建前缀状态而不是常量对象。
用功能组件这样做:
const [prefix, setPrefix] = React.useState('$')
将其传递到MaskedInput中，如下所示:
return <MaskedInput mask={currencyMask} prefix={prefix} {...inputProps} />
在当前组件中的某个位置使用onClick处理程序更新前缀，如下所示:
const handleCurrencyChange = (event) => {
setPrefix(event.target.value)
}
当在父级中更新状态时，它将在MaskedInput组件中重新呈现。
附加地
如果您需要更新MaskedInput中的prefix，您可以像任何其他道具一样传入setprefix，并使用它来更新状态，就像我上面显示的在父级中一样。
