Ant Design Form Input 组件添加快捷按钮及点击事件

例如，我想在 Ant Design 的 Input 按钮右侧添加一个快捷按钮，
用来自动将文章标题生成网址 slug。

实现逻辑

• Antd Input 组件有个 addonAfter 属性，可以在输入框右侧加入一个图标按钮
  
• 图标按钮在定义时，指定 onClick 事件处理
  
• 创建一个 react ref 绑定到 antd form 上，方便读取/设置 field 值 (没有使用 antd 自带的 useForm, 我觉得用 React.createRef 更通用些)
  

最终代码

import type {FormInstance} from 'antd';
import {getSlug} from '@/services/ant-design-pro/api';
import {ThunderboltOutlined} from '@ant-design/icons';

const CreateForm: React.FC<CreateFormProps> = (props) => {
    const formRef = React.createRef<FormInstance<API.Article>>();
    const genSlug = (
        <ThunderboltOutlined onClick={slugHandler} />
    );

    async function slugHandler() {
        const title = formRef.current?.getFieldValue("Title");
        const data = await getSlug({Content: title});
        if (data.errCode == 0) {
            formRef.current?.setFieldValue("Slug", data.data);
        }
    }

    return (
        <Modal>
            <Form ref={formRef}>
                <Form.Item name="Slug" label="Slug" rules={[{ required: true }]}>
                    <Input addonAfter={genSlug} />
                </Form.Item>
            </Form>
        </Modal>
    )
}

比较恶心的地方

• 需要经常查 ant design 组件的文档
  
• typescript 太恶心了，完全不能像 js 一样自由的书写，满屏幕报错警告，处理一遍得半天

关于作者 🌱

我是来自山东烟台的一名开发者，有感兴趣的话题，或者软件开发需求，欢迎加微信 zhongwei 聊聊，或者关注我的个人公众号“大象工具”， 查看更多联系方式