我想使用 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>
);
}
您需要一个受控的表单输入，因此需要给定一个值，以及一个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>
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
