{"id":425,"date":"2026-02-25T15:48:00","date_gmt":"2026-02-25T07:48:00","guid":{"rendered":"https:\/\/mitongxue.cn\/?p=425"},"modified":"2026-06-14T15:53:55","modified_gmt":"2026-06-14T07:53:55","slug":"antd%e8%bf%9e%e4%bd%93%e5%b8%83%e5%b1%80","status":"publish","type":"post","link":"https:\/\/mitongxue.cn\/index.php\/2026\/02\/25\/antd%e8%bf%9e%e4%bd%93%e5%b8%83%e5%b1%80\/","title":{"rendered":"Antd\u8fde\u4f53\u5e03\u5c40"},"content":{"rendered":"\n

\u9519\u8bef\u4fe1\u606f<\/p>\n\n\n\n

Warning: [antd: Input] `addonAfter` is deprecated. Please use `Space.Compact` instead.<\/code><\/pre>\n\n\n\n
<\/p>\n\n\n\n
\u5b9e\u73b0\u624b\u673a\u53f7\u9a8c\u8bc1\u7801\u8fde\u4f53\u5e03\u5c40\u65f6\uff0c\u65e7\u7248\u672c\u4f7f\u7528addonAfter\uff0c\u4f1a\u51fa\u73b0\u8fb9\u6846\u683c\u5f0f\u4e0d\u5339\u914d\u7b49\u95ee\u9898\uff0c\u65b0\u7248\u672c\u91c7\u7528\u8fde\u4f53\u5e03\u5c40\u3002<\/p>\n\n\n\n
addonAfter \/ addonBefore<\/code> \u5df2\u88ab\u5b98\u65b9\u6807\u8bb0\u5e9f\u5f03\uff0c\u4e0d\u518d\u7ef4\u62a4\uff0c\u8981\u6c42\u7edf\u4e00\u6539\u7528 Space.Compact<\/code> \u7d27\u51d1\u7ec4\u5408\u7ec4\u4ef6\u5b9e\u73b0\u8f93\u5165\u6846 + \u540e\u7f6e\u6309\u94ae\u8fde\u4f53\u5e03\u5c40\uff0c\u8fb9\u6846\u81ea\u52a8\u5408\u5e76\u3001\u5706\u89d2\u81ea\u52a8\u8854\u63a5\uff0c\u517c\u5bb9\u6027\u66f4\u5f3a\u3002<\/p>\n\n\n\n
1\u3001\u65e7\u5e9f\u5f03\u5199\u6cd5\uff08\u4f60\u5f53\u524d\u4ee3\u7801\uff09<\/h2>\n\n\n\n
\/\/ \u274c \u8b66\u544a\u63d0\u793a deprecated\n<Input\n  placeholder=\"\u624b\u673a\u53f7\"\n  addonAfter={<Button>\u83b7\u53d6\u9a8c\u8bc1\u7801<\/Button>}\n\/><\/code><\/pre>\n\n\n\n
2\u3001\u6807\u51c6\u66ff\u6362\u5199\u6cd5 Space.Compact<\/h2>\n\n\n\n
import { Input, Button, Space } from 'antd';\nconst { Compact } = Space;\n\n\/\/ \u2705 \u65e0\u8b66\u544a\uff0c\u8fb9\u6846\u81ea\u52a8\u65e0\u7f1d\u62fc\u63a5\n<Compact>\n  <Input placeholder=\"\u624b\u673a\u53f7\" style={{ borderRadius: 0 }} \/>\n  <Button type=\"primary\" style={{ borderRadius: 0 }}>\u83b7\u53d6\u9a8c\u8bc1\u7801<\/Button>\n<\/Compact><\/code><\/pre>\n\n\n\n
<\/p>\n\n\n\n
3\u3001\u4f7f\u7528<\/h2>\n\n\n\n
import React from 'react';\nimport IconMap from 'components\/IconMap.jsx';\nimport { LoginRule } from 'utils\/rules';\nimport { Space } from 'antd';\nconst { Compact } = Space;\nconst SmCodeLogin = ({FormItem, Input, Button}) => {\n    const handleSendCode = () => {\n        console.log('\u53d1\u9001\u9a8c\u8bc1\u7801');\n    }\n    return (\n        <>\n            <FormItem\n                name=\"mobile\"\n                rules={LoginRule.mobileRule}\n            >\n                <Input   prefix={IconMap.mobile} placeholder=\"\u8bf7\u8f93\u5165\u624b\u673a\u53f7\" \/>\n            <\/FormItem>\n            <FormItem\n                name=\"code\"\n                rules={[{ required: true, message: 'Please input your Code!' }]}\n            >\n                <Compact>\n                    <Input   \n                    prefix={IconMap.code} \n                    placeholder=\"\u8bf7\u8f93\u5165\u9a8c\u8bc1\u7801\"\n                    \/\/ addonAfter={<Button onClick={handleSendCode}>\u53d1\u9001\u9a8c\u8bc1\u7801<\/Button>} \n                    \/>\n                    <Button onClick={handleSendCode}>\u53d1\u9001\u9a8c\u8bc1\u7801<\/Button>\n                <\/Compact>\n            <\/FormItem>\n        <\/>\n    );\n}\n\nexport default SmCodeLogin;\n<\/code><\/pre>\n\n\n\n
4\u3001\u5173\u952e\u7279\u6027\u8bf4\u660e<\/h2>\n\n\n\n
    \n
  1. Space.Compact<\/code> \u81ea\u52a8\u6d88\u9664\u76f8\u90bb\u7ec4\u4ef6\u91cd\u590d\u8fb9\u6846\uff0c\u4e0d\u7528\u624b\u52a8\u5199 borderLeft:none<\/code>\uff1b<\/li>\n\n\n\n
  2. \u652f\u6301\u4efb\u610f\u6570\u91cf\u7ec4\u4ef6\u5e76\u6392\uff1aInput + Button + Select \u81ea\u7531\u7ec4\u5408\uff1b<\/li>\n\n\n\n
  3. \u652f\u6301 block<\/code> \u5c5e\u6027\uff0c\u6574\u4f53 100% \u5bbd\u5ea6\u94fa\u6ee1\u7236\u5bb9\u5668\uff1a<\/li>\n\n\n\n
  4. <\/li>\n<\/ol>\n\n\n\n
    <Compact block>\n  <Input style={{ borderRadius: 0 }} \/>\n  <Button block={false} style={{ borderRadius: 0 }}>\u67e5\u8be2<\/Button>\n<\/Compact><\/code><\/pre>\n\n\n\n
      \n
    1. antd4.24+\u3001antd5 \u5b8c\u5168\u901a\u7528\uff0c\u662f\u5b98\u65b9\u7edf\u4e00\u63a8\u8350\u7684\u7d27\u51d1\u5e03\u5c40\u6807\u51c6\u65b9\u6848<\/li>\n<\/ol>\n\n\n\n
      <\/h2>\n\n\n\n