리액트에서 쉼표로 숫자를 포맷하려면 어떻게 해야 합니까?

리액트에서 쉼표로 숫자를 포맷하려면 어떻게 해야 합니까?

내 API는 다음과 같은 React 정수를 보냅니다.10, 31312, 4000.

My React 컴포넌트에서 다음과 같은 숫자의 올바른 형식은 무엇입니까?

from: 10, 31312, 4000
to: 10, 31,312, 4,000

갱신하다

번호는 내 Rails API에서 제공하며 React 구성요소로 렌더링됩니다.

const RankingsList = ({rankings, currentUserId}) => {
  return (
      <div className="listGroup">
        {rankings.map((ranking, index) =>
            <span className="number">{ranking.points}</span>
        )}
      </div>
  );
};

JavaScript에서 쉼표로 숫자를 수천 개의 구분 기호로 인쇄합니다.

이를 위한 일반적인 JS 솔루션을 찾을 수 있습니다.

---

ToLocaleString:

// A more complex example: 
number.toLocaleString(); // "1,234,567,890"

// A more complex example: 
var number2 = 1234.56789; // floating point example
number2.toLocaleString(undefined, {maximumFractionDigits:2}) // "1,234.57"

번호 형식(Safari는 지원되지 않습니다):

var nf = new Intl.NumberFormat();
nf.format(number); // "1,234,567,890"

출처 : https://stackoverflow.com/a/32154217/6200607

---

var number = 1234567890;// 변환할 예제 번호

⚠ javascript의 최대 정수값은 9007199254740991입니다.

---

기타 솔루션:

https://css-tricks.com/snippets/javascript/comma-values-in-numbers/

2345643.00은 2,345,643.00을 반환합니다.

다음 중 하나로 번호를 변환하는 클래스가 있습니다.31,312또는31,312.00.

암호는 거의 비슷합니다.

return value.toLocaleString(navigator.language, { minimumFractionDigits: 2 });

그리고.

return value.toLocaleString(navigator.language, { minimumFractionDigits: 0 });

그래서 그냥 사용하시면 돼요.toLocaleString변환에 사용합니다.

갱신하다

예를 들어 다음과 같습니다(포인트가 숫자라고 가정).

const RankingsList = ({rankings, currentUserId}) => {
  return (
      <div className="listGroup">
        {rankings.map((ranking, index) =>
            <span className="number">{ranking.points.toLocaleString(navigator.language, { minimumFractionDigits: 0 })}</span>
        )}
      </div>
  );
};

다만, 이 컴포넌트를, 라고 하는 작은 컴포넌트로 이동하는 것을 추천합니다.NumberDisplay소수점 표시/숨기기 속성'을 지정합니다.

  export const formatNumber = inputNumber => {
    let formetedNumber=(Number(inputNumber)).toFixed(2).replace(/\d(?=(\d{3})+\.)/g, '$&,');
    let splitArray=formetedNumber.split('.');
    if(splitArray.length>1){
      formetedNumber=splitArray[0];
    }
    return(formetedNumber);
  };

소수점을 무시하고 있습니다.

입력 또는 텍스트 형식으로 숫자에 반응하는 구성 요소: react-number-format

const numberWithCommas = (x) => {
  return x.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");
};

리액션 보이즈, 이 부품을 사용해.

// number cell
function NumberCell({ line, handleBlur, property, readOnly }) {
    function replaceNonNumeric(numStr) {
        return String(numStr).replace(/[^0-9]/g, '')
    }
    function commarize(numStr) {
        return Number(replaceNonNumeric(numStr)).toLocaleString()
    }

   
    useEffect(() => {
        setValue(commarize(line[property.name]))
    }, [line])


    const [value, setValue] = useState(line[property.name])

    const handleChange = e => {
        setValue(commarize(e.target.value))
    }

    function proxyHandleBlur(e) {
        e.target.value = replaceNonNumeric(e.target.value)
        return handleBlur(e)
    }

    return (
        <input 
            name={property.name}
            value={ value }
            onChange={handleChange}
            onBlur={proxyHandleBlur}
            type="text"
            readOnly={readOnly}
            />
    );
}

import React from 'react'

export default function Test() {

 const [finalAmount, setfinalAmount]= useState("");
 const handleNumChange = (event) => {
 const str = (event.target.value).replace(/\,/g,'');
    setfinalAmount(str);
  }

  return (
    <div>
        <input type="text" onChange={handleNumChange}
         value={new Intl.NumberFormat('en-IN',{}).format(finalAmount)}
        />
   </div>
  )
}

언급URL : https://stackoverflow.com/questions/44784774/in-react-how-to-format-a-number-with-commas