Question

我已经制作了Input组件。如果是数字，我想正确设置格式，例如货币。即4000将是4,000。

我在显示和更新它时遇到问题。

<Input initialValue={'400000000'} isNumber={true} />

我的Input组件看起来像这样。

type Props = {
    initialValue?: string;
    isNumber?: boolean;
};

const Input = ({ initialValue = '', isNumber }: Props) => {
    const [value, updateValue] = useState(initialValue);

    const update = (val: any) => {
        if (isNumber) {
            const x = Number(val);
            updateValue(x.toLocaleString());
        } else {
            updateValue(val);
        }
    };

    return (
        <StyledInput
            type="text"
            value={value}
            onChange={e => update(e.target.value)}
        />
    );
};

我在输入组件中看到错误NaN。有人有什么想法吗？

Answer 1

问题出在

const x = Number(val);

当您评估Number("32,423,343")时，包含逗号Js的字符串将引发错误... 正确的方法是发送不带逗号的数字。.Number("32432343") 要解决它，您可以在评估为数字之前添加此行以删除逗号。

val = val.replace(/,/g, '');

https://codesandbox.io/s/r0vm8nxvjo

Answer 2

JavaScript具有数字格式化程序（国际化API的一部分）。

validations: {
    finishedAtYear: {
        isFinishedFill: (value) => { /* do some checks here */ },
    },
}

代码段：

    // Quick Solution With Intl.NumberFormat
    const update = (val: any) => {
    var formatter = new Intl.NumberFormat("en-US");         // Intl language tag,
    updateValue(formatter.format(val.replace(/,/g, "")));   //Remove ',' to format number again
    };

注意：代码段为您提供了格式化数字的想法，您需要处理更多的生产用例。

还要检查react-number-format，它可能适合您的应用程序。

参考：

输入反应中的格式化编号

2 个答案: