DT走过的路

错误信息

Warning: [antd: Input] `addonAfter` is deprecated. Please use `Space.Compact` instead.

实现手机号验证码连体布局时，旧版本使用addonAfter，会出现边框格式不匹配等问题，新版本采用连体布局。

addonAfter / addonBefore 已被官方标记废弃，不再维护，要求统一改用 Space.Compact 紧凑组合组件实现输入框 + 后置按钮连体布局，边框自动合并、圆角自动衔接，兼容性更强。

1、旧废弃写法（你当前代码）

// ❌ 警告提示 deprecated
<Input
  placeholder="手机号"
  addonAfter={<Button>获取验证码</Button>}
/>

2、标准替换写法 Space.Compact

import { Input, Button, Space } from 'antd';
const { Compact } = Space;

// ✅ 无警告，边框自动无缝拼接
<Compact>
  <Input placeholder="手机号" style={{ borderRadius: 0 }} />
  <Button type="primary" style={{ borderRadius: 0 }}>获取验证码</Button>
</Compact>

3、使用

import React from 'react';
import IconMap from 'components/IconMap.jsx';
import { LoginRule } from 'utils/rules';
import { Space } from 'antd';
const { Compact } = Space;
const SmCodeLogin = ({FormItem, Input, Button}) => {
    const handleSendCode = () => {
        console.log('发送验证码');
    }
    return (
        <>
            <FormItem
                name="mobile"
                rules={LoginRule.mobileRule}
            >
                <Input   prefix={IconMap.mobile} placeholder="请输入手机号" />
            </FormItem>
            <FormItem
                name="code"
                rules={[{ required: true, message: 'Please input your Code!' }]}
            >
                <Compact>
                    <Input   
                    prefix={IconMap.code} 
                    placeholder="请输入验证码"
                    // addonAfter={<Button onClick={handleSendCode}>发送验证码</Button>} 
                    />
                    <Button onClick={handleSendCode}>发送验证码</Button>
                </Compact>
            </FormItem>
        </>
    );
}

export default SmCodeLogin;

4、关键特性说明

1. Space.Compact 自动消除相邻组件重复边框，不用手动写 borderLeft:none；
2. 支持任意数量组件并排：Input + Button + Select 自由组合；
3. 支持 block 属性，整体 100% 宽度铺满父容器：

<Compact block>
  <Input style={{ borderRadius: 0 }} />
  <Button block={false} style={{ borderRadius: 0 }}>查询</Button>
</Compact>

4. antd4.24+、antd5 完全通用，是官方统一推荐的紧凑布局标准方案

• addonAfter：外层后置（废弃）
• suffix：输入框内部右侧嵌入小图标 / 按钮（仍可用，不废弃）
• Space.Compact：组件外部并排连体，替代旧 addon 方案