Ant Design Form.Item 输入框自动补充两位小数

以下代码展示了如何使用 Ant Design Form.Item 输入框组件，实现输入金额时自动补充两位小数的功能：

<Form.Item
  label='合同金额'
  name='contractAmount'
  rules={[
    { required: true, message: '请输入合同金额！' },
    {
      pattern: /(^[1-9]([0-9]+)?(.[0-9]{1,2})?$)|(^(0){1}$)|(^[0-9].[0-9]([0-9])?$)/,
      message: '格式错误，只保留两位小数!',
      validateTrigger: ['onBlur', 'onChange'],
    },
  ]}
>
  <Input addonAfter='万' onBlur={(e) => {
    const value = parseFloat(e.target.value);
    if (isNaN(value)) {
      return;
    }
    e.target.value = value.toFixed(2);
  }} />
</Form.Item>

代码解析：

• 通过 `onBlur` 事件监听输入框失去焦点，获取用户输入的值。
• 使用 `parseFloat` 将用户输入的值转换为浮点数。
• 使用 `toFixed(2)` 方法将浮点数保留两位小数。
• 将处理后的结果重新赋值给输入框的 `value` 属性，实现自动补充两位小数。

通过以上代码，我们可以轻松实现 Ant Design Form.Item 输入框组件的自动补充两位小数功能，提高用户体验和数据准确性。