javascript - formatting number in input react - Stack Overflow

admin管理员组

文章数量:1320865

I have made an Input ponent. If it is a number I want to format it correctly, like a currency. I.e. 4000 would be 4,000.

Here is a codesandbox.

I am having issues with displaying and updating this.

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

My Input ponent looks like this.

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

I am seeing an error NaN in my input ponent. Anyone have any ideas?

I have made an Input ponent. If it is a number I want to format it correctly, like a currency. I.e. 4000 would be 4,000.

Here is a codesandbox.

I am having issues with displaying and updating this.

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

My Input ponent looks like this.

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

I am seeing an error NaN in my input ponent. Anyone have any ideas?

• javascript
• reactjs
• ecmascript-6

Share Improve this question Follow edited Jan 31, 2019 at 11:51 peter flanagan asked Jan 31, 2019 at 11:45 peter flanaganpeter flanagan 9,8402727 gold badges8181 silver badges139139 bronze badges 10

• @Chris He is converting string to Number -> const x = Number(val); – Alwaysblue Commented Jan 31, 2019 at 11:50
• updateValue is part of the useState hook allowing me to update the state – peter flanagan Commented Jan 31, 2019 at 11:51
• react-number-format – Şivā SankĂr Commented Jan 31, 2019 at 11:53
• @ŞivāSankĂr I don't really want to use a library for this – peter flanagan Commented Jan 31, 2019 at 11:54
• 3 Try const update = (val: any) => { var formatter = new Intl.NumberFormat("en-US"); updateValue(formatter.format(val.replace(/,/g, ""))); }; – Şivā SankĂr Commented Jan 31, 2019 at 12:15

 |  Show 5 more ments

2 Answers 2

Sorted by: Reset to default 2

Javascript has a number formatter (part of the Internationalization 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
    };

Code Snippet:

// Intl.NumberFormat With React State Update

var currentVal = 0;
...
const update = (event: any) => {
   /**
   https://stackoverflow./questions/35535688/stop-cursor-jumping-when-formatting-number-in-react
   https://github./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)} />);

Note : Code Snippet gives you an idea to format numbers, You need to handle few more use-cases for production.

Also check the react-number-format, Which may suit for your application.

Reference :

• Intl.NumberFormat vs Number.prototype.toLocaleString
• How can I format numbers as dollars currency string in JavaScript?
• Intl.NumberFormat | MDN

The problem is in

const x = Number(val);

when you evaluate Number("32,423,343"), a string including mas Js will throw an error... The correct way would be sending the number without mas.. Number("32432343") To solve it you can add this line to remove the mas, before evaluating to a Number..

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

https://codesandbox.io/s/r0vm8nxvjo

本文标签： javascriptformatting number in input reactStack Overflow