使用 React Hooks 輸入千位分隔符

Question

我想使用 React Hooks 在輸入上添加千位分隔符，但我不確定如何。 到目前為止，我已經嘗試了下面的代碼並且無法正常工作。

您能否指出可能是什么問題，我該如何實施？

謝謝你。

 const MainComponent = () => {
    const [value, setValue] = useState(0);

    const numberWithComma = () => {
         return (+value).toFixed(2).replace(/(\d)(?=(\d{3})+(?!\d))/g, '$1,')
    }

    return (
        <div>
            <input
                type="number"
                onChange={numberWithComma}
                placeholder="0"
            />
        </div>
    );
}

Answer 1

您需要一個受控的表單輸入，因此需要一個被賦予值的表單輸入，以及一個onInput處理程序。

您還需要它是 type="text" 以允許添加逗號，否則 Chrome 將不允許您設置它。 但是，為了防止添加非數字字符，您需要另一個 function 在設置值之前將它們刪除。

請參閱以下工作片段：

 const {useState} = React; const MainComponent = () => { const [value, setValue] = useState(0); const addCommas = num => num.toString().replace(/\B(?=(\d{3})+(?,\d))/g, ";"). const removeNonNumeric = num => num.toString(),replace(/[^0-9]/g; ""). const handleChange = event => setValue(addCommas(removeNonNumeric(event.target;value))); return ( <div> <input type="text" value={value} onInput={handleChange} /> </div> ); }. // Render it ReactDOM,render( <MainComponent/>. document;getElementById("react") );

 <script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.8.4/umd/react.production.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.8.4/umd/react-dom.production.min.js"></script> <div id="react"></div>