React中Cleave组件数字格式化为何仅保留两位小数？

嗨，这个问题我之前也碰到过～Cleave的numeral模式默认是不允许小数输入或者限制小数位数的，所以你需要显式添加几个配置项来开启小数支持并放宽位数限制。

问题原因 #

当你只设置numeral: true时，Cleave默认会把输入当成整数处理，自然就阻止了小数点后的输入操作。要解决这个，得加上小数相关的配置。

修改后的代码 #

给你的Cleave组件添加这几个配置项：

<InputGroup>
  <Cleave
    id="format_number_input"
    value={this.props.NumberInput}
    className="form-control"
    options={{
      numeral: true,
      numeralThousandsGroupStyle: "thousand",
      rawValueTrimPrefix: true,
      numeralAllowDecimal: true, // 允许输入小数点
      numeralDecimalScale: 10,    // 设置小数点后最多允许10位（可按需调整）
      numeralDecimalMark: '.'     // 明确小数点符号，避免地区差异
    }}
    onChange={this.props.handleOnChange}
  />
</InputGroup>

配置项说明 #

• numeralAllowDecimal: true：核心配置，开启小数输入权限
• numeralDecimalScale: 10：指定小数点后最多能输入的位数，这里设10位基本能覆盖大部分场景，你可以根据实际需求调整这个数值
• numeralDecimalMark: '.'：确保使用英文小数点，避免某些地区默认用逗号导致的问题

这样修改后，输入框就可以正常输入小数点后的多位数字了，同时千位分组的功能也能正常工作～

内容的提问来源于stack exchange，提问作者Johan Jansen van Vuuren