如何在freeSolo模式的MUI Autocomplete组件删除Chip前获取其值

问题原因 #

getTagProps({ index })返回的配置对象中自带MUI封装好的onDelete处理函数，用于完成Chip删除的内置逻辑：

• 当你把{...getTagProps({ index })}写在自定义onDelete之后时，内置的onDelete会直接覆盖你写的自定义逻辑，所以你看不到打印输出，但删除功能正常
• 当你移除{...getTagProps({ index })}时，缺失了内置的删除逻辑，所以你的自定义逻辑能触发，但Chip不会被真正删除

解决方案 #

先取出getTagProps返回的原生配置，在自定义的onDelete中先执行你需要的前置逻辑（获取待删除内容），再调用原生的onDelete完成删除操作即可，示例代码如下：

renderTags={(value, getTagProps) =>
  value.map((option, index) => {
    // 先拿到原生的tag配置，包含内置onDelete
    const tagProps = getTagProps({ index })
    return (
      <Chip
        key={index}
        variant="outlined"
        label={option}
        {...tagProps}
        onDelete={(e) => {
          // 自定义前置逻辑：获取待删除的Chip内容
          console.log("待删除的Chip内容：", option)
          // 调用原生onDelete完成删除
          tagProps.onDelete(e)
        }}
      />
    )
  })
}

这种写法可以同时保留自定义前置逻辑和MUI内置的删除功能，不需要修改其他Autocomplete配置。

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