我目前正在尝试创建一个输入,该输入将接受十进制数字,并同时使用千位分隔符自动格式化。
但是,我唯一可以自动格式化千位分隔符的方法是设置输入类型='文本',我无法输入十进制数字。设置 input type='number' 允许我输入十进制数字,但它不会使用千位分隔符自动格式化
这是代码:
<input
className="cal__section__form__container--input"
placeholder={0}
type="text"
value={displayVal || ""}
onChange={(e) => {
const targ = e.target.value.replace(/\D/g, "") || 0;
const displayVal = parseFloat(targ).toLocaleString(undefined, {
maximumFractionDigits: 2,
});
console.log(displayVal);
}}
/>
您永远不会更新您的 displayVal 状态。在 onChange 之外处理事件逻辑也是一种很好的做法。您的代码应如下所示:
const handleChange = (e) => {
const value = e.target.value;
const clean = value.replace(/,/g, "");
const regex = /^[0-9]*\.?[0-9]*$/;
if (value && clean.match(regex)) {
if (!value.includes(".")) {
const formatted = new Intl.NumberFormat().format(parseFloat(clean));
setDisplayVal(formatted);
} else {
setDisplayVal(value);
}
} else {
setDisplayVal("");
}
};
<input
className="cal__section__form__container--input"
placeholder={0}
type="text"
value={displayVal}
onChange={handleChange}
/>
export default function App() {
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 className="App">
<h1>Hello CodeSandbox</h1>
<h2>Start editing to see some magic happen!</h2>
<input type="text" value={value} onChange={handleChange} />
</div>
);
}
有关工作示例,您可以查看沙盒链接:工作示例。