【React工作记录三十五】ant design中默认回调加入参数

本文是前端开发者在使用Ant Design时遇到的一个问题:如何在默认回调中添加额外参数。作者通过一个具体的例子展示了如何利用箭头函数在`handleChange`回调中获取数组的index,以此达到传递额外信息的目的。
摘要由CSDN通过智能技术生成

目录

前言

导语

 代码部分

总结


前言

我是歌谣 我有个兄弟 巅峰的时候排名c站总榜19 叫前端小歌谣 曾经我花了三年的时间创作了他 现在我要用五年的时间超越他 今天又是接近兄弟的一天人生难免坎坷 大不了从头再来 歌谣的意志是永恒的 放弃很容易 但是坚持一定很酷

导语

歌谣 歌谣 这边如果ant design自身默认回调需要加入其他参数怎么实现

 代码部分

   <div>
              {tagList &&
                tagList.map((item, index) => (
                  <CheckableTag
                    checked={item.checked}
                    key={index}
    
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
React + Hooks + TypeScript + Ant Design,要实现两个联动的 `ProFormSelect` 组件,你可以按照以下步骤进行操作: 1. 首先,确保你已经安装了 `antd` 和 `@ant-design/pro-form` 这两个依赖。 2. 在你的组件引入所需的模块: ```tsx import React, { useState } from 'react'; import { ProFormSelect } from '@ant-design/pro-form'; import { Select } from 'antd'; const { Option } = Select; ``` 3. 创建一个函数组件,定义初始状态和联动逻辑: ```tsx const LinkedProFormSelect: React.FC = () => { // 定义两个联动的下拉框的选项数据 const [firstSelectOptions, setFirstSelectOptions] = useState<string[]>([]); const [secondSelectOptions, setSecondSelectOptions] = useState<string[]>([]); // 第一个下拉框选择项改变时的回调函数 const handleFirstSelectChange = (value: string) => { // 根据第一个下拉框的选项值更新第二个下拉框的选项数据 if (value === 'option1') { setSecondSelectOptions(['option1-1', 'option1-2']); } else if (value === 'option2') { setSecondSelectOptions(['option2-1', 'option2-2']); } }; return ( <div> <ProFormSelect name="firstSelect" label="First Select" options={firstSelectOptions.map((option) => ({ value: option, label: option }))} fieldProps={{ onChange: handleFirstSelectChange, }} /> <ProFormSelect name="secondSelect" label="Second Select" options={secondSelectOptions.map((option) => ({ value: option, label: option }))} /> </div> ); }; export default LinkedProFormSelect; ``` 4. 在你的父组件使用 `LinkedProFormSelect` 组件: ```tsx const ParentComponent: React.FC = () => { return ( <div> <LinkedProFormSelect /> </div> ); }; export default ParentComponent; ``` 这样,你就实现了两个联动的 `ProFormSelect` 组件。当第一个下拉框的选项改变时,第二个下拉框的选项会根据选择的值进行更新。你可以根据实际需求修改联动逻辑和选项数据。希望能对你有所帮助!
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

前端大歌谣

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值