货币输入的动态道具

Question

您知道如何将货币从前缀'$'静态字符串更改为动态字符串，并将其作为道具传递给MaskedInput组件吗？ 稍后，我将有一个更改货币按钮，我希望用户看到他选择的货币进入输入。

const defaultMaskOptions = {
prefix: '$',
suffix: '',
includeThousandsSeparator: true,
thousandsSeparatorSymbol: '',
allowDecimal: true,
}

const CurrencyInput = ({ maskOptions, ...inputProps }) => {
const currencyMask = createNumberMask({
...defaultMaskOptions,
...maskOptions,
})

return <MaskedInput mask={currencyMask} {...inputProps} />

}

Answer 1

您需要创建前缀状态而不是常量对象。

用功能组件这样做:

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，并使用它来更新状态，就像我上面显示的在父级中一样。