Изменить состояние валюты из объекта const по умолчанию

Question

Я хотел бы изменить состояние префикса валюты из моего компонента defaultMaskOptions, поскольку позже это будет использоваться в качестве опоры в другом компоненте. Это код:

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, когда состояние обновляется в родительском.

Дополнительно

Если вам нужно обновить prefix внутри MaskedInput, вы можете передать setPrefix, как и любую другую опору, и использовать его для обновления состояния, как в родительском элементе, как я показано выше.