使用 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 将不允许您进行设置。但是，为了防止添加非数字字符，您需要另一个函数在设置值之前将它们去掉。

请参阅以下工作片段：

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>