如何在antd Select的onChange事件中传递第二个参数及实现删除功能

1. 获取Select组件的id #

你当前的写法误解了onChange第二个参数的含义：AntD Select的onChange回调第二个参数是当前选中的Option选项的配置对象，不是你给Select组件自身绑定的id属性。
要拿到你给Select绑定的id={x-1}，直接通过闭包传递即可，不需要从回调参数中读取，修改后的Select写法如下：

<Select 
  id={x-1} 
  style={{ width: "100%" , minWidth:'5px'}} 
  placeholder="Group name" 
  onChange={(value, option) => handleGroupByname(value, option, x-1)}
>
  {dropdown_values.map((y) => (
    <Option key={y}>{y}</Option>
  ))}
</Select>

对应的handleGroupByname函数可以直接接收第三个参数作为当前Select的id：

const handleGroupByname = (value, option, selectId) => {
  // 这里的selectId就是你绑定的x-1的值
  console.log('当前Select的id：', selectId)
  // 后续业务逻辑
}

2. 点击delete删除对应下拉项 #

你需要给delete按钮的点击事件传递当前下拉的唯一标识，同时用来渲染下拉列表的数据源需要存在组件state中，不能每次渲染临时生成：

第一步：定义存储下拉列表的state #

假设你用函数组件，先定义state存储所有下拉的唯一标识：

import { useState } from 'react'

// 初始值可以根据你的NameCount生成，比如：
const [selectIdList, setSelectIdList] = useState(() => Array.from({length: NameCount}, (_,i) => i))

第二步：修改渲染逻辑和delete按钮的点击事件 #

const renderSelectList = () => {
  return selectIdList.map(id => (
    <div key={id} style={{width:"100%" , minWidth:'5px', marginRight:'0.5rem'}} >
      <Select 
        id={id} 
        style={{ width: "100%" , minWidth:'5px'}} 
        placeholder="Group name" 
        onChange={(value, option) => handleGroupByname(value, option, id)}
      >
        {dropdown_values.map((y) => (
          <Option key={y}>{y}</Option>
        ))}
      </Select>
      <span onClick={() => handleDelete(id)}>delete</span>
    </div>
  ))
}

第三步：实现handleDelete方法 #

const handleDelete = (targetId) => {
  // 过滤掉要删除的id对应的项，更新state即可自动重渲染
  setSelectIdList(prev => prev.filter(id => id !== targetId))
}

注意：原来的while循环生成临时数组的写法不可取，没有和state绑定，删除后无法触发视图更新，换成state驱动的map渲染即可

内容的提问来源于stack exchange，提问作者devb