форматирование числа во входной реакции

Question

Я сделал компонент Input.Если это число, я хочу правильно отформатировать его, как валюту.Т.е. 4000 будет 4,000.

Вот codesandbox .

У меня проблемы с отображением и обновлением.

<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

Javascript имеет средство форматирования чисел (часть API интернационализации).

    // 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
    };

Фрагмент кода:

// Intl.NumberFormat With React State Update

var currentVal = 0;
...
const update = (event: any) => {
   /**
   https://stackoverflow.com/questions/35535688/stop-cursor-jumping-when-formatting-number-in-react
   https://github.com/facebook/react/issues/955
   */
   const caret = event.target.selectionStart
      const element = event.target
         window.requestAnimationFrame(() => {
         element.selectionStart = caret
         element.selectionEnd = caret
      })
   // -- Stop cursor jumping when formatting number in React

   var val = event.target.value.replace(/(\..*)\./g, '$1') //Replace Multiple Dot(.)
   var x = Number(val.replace(/,/g, ""));
   if (currentVal != x) {
      var formatter = new Intl.NumberFormat("en-US", { minimumFractionDigits:2});
      currentVal = formatter.format(x);
      updateValue(currentVal);
   }else{
      updateValue(val);
   }
 };

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

Примечание: Фрагмент кодадает представление о форматировании чисел. Вам нужно обработать еще несколько вариантов использования для производства.

Также проверьте формат числа-ответа , который может подойти для вашего приложения..

Ссылка:

• Intl.NumberFormat против Number.prototype.toLocaleString
• Как можноЯ форматирую числа в виде строки валюты долларов в JavaScript?
• Intl.NumberFormat |MDN

Answer 2

Проблема в

const x = Number(val);

, когда вы оцениваете Number("32,423,343"), строка с запятыми Js выдаст ошибку ... Правильным способом будет отправка числа без запятых. Number("32432343")Чтобы решить эту проблему, вы можете добавить эту строку, чтобы удалить запятые, прежде чем оценивать число ..

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

https://codesandbox.io/s/r0vm8nxvjo