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

更新日期: 2022-08-05 阅读次数: 5225 字数: 262 分类: ReactJS

例如,我想在 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 聊聊, 查看更多联系方式