React中FormattedNumber展示百分比限制最大值10%的实现咨询

实现方案（无需修改通用组件源码，仅对当前CapitalisationRate字段生效） #

你只需要在调用SetSupplementsRate的父组件侧做两层限制即可： #

1. 截断传入组件的展示值

保证按钮上展示的百分比永远不会超过10%，修改rate属性的传值逻辑：

<Col span={4}>
  <SetSupplementsRate
    rateName="CapitalisationRate"
    buttonLabel={t(
      'reservationcalculator.reservecalculation.addendum.treatmentcosts.capitalization'
    )}
    modalTitle={t(
      'reservationcalculator.reservecalculation.capitalization.selectcapitalization'
    )}
    {/* 这里做截断，注意如果你的rate数值是已乘100的格式（比如10代表10%），就把0.1改成10 */}
    rate={Math.min(CapitalisationRate, 0.1)}
    // 新增处理后的提交回调
    onSubmit={handleCapitalRateSubmit}
  />
</Col>

2. 提交时做数值校验&截断

保证用户提交的数值最大为10%，新增提交处理逻辑：

const handleCapitalRateSubmit = (values) => {
  let finalRate = values.Rate
  // 仅对当前字段做限制
  if (finalRate > 0.1) {
    finalRate = 0.1
    // 可选：给用户提示已自动调整数值
    // message.info('资本化率最大允许设置为10%，已自动调整')
  }
  // 此处替换为你原有保存Rate的逻辑
  setCapitalisationRate(finalRate)
}

补充说明

• 如果你的业务数值规则是直接存百分比数值（比如10代表10%），把上面所有0.1替换为10即可
• 如果通用SetSupplementsRate组件没有对外暴露onSubmit属性，可直接在更新CapitalisationRate状态的逻辑里做截断：

// 示例：状态更新逻辑
const updateRate = (rateName, value) => {
  let processedValue = value
  if (rateName === 'CapitalisationRate') {
    processedValue = Math.min(value, 0.1)
  }
  setCapitalisationRate(processedValue)
}

• 所有逻辑都收敛在当前父组件内，完全不会影响其他业务场景对SetSupplementsRate通用组件的使用
• 如果需要更严格的输入限制，可在提交时做错误拦截，超过10%时抛出报错阻止提交。

内容的提问来源于stack exchange，提问作者LaFllamme