如何在Ant Design Select下拉选项内实现重置选中值回到默认值功能

实现方案 #

核心问题是当前你使用的是Select的非受控模式，defaultValue仅在首次渲染生效，后续修改state无法更新组件的选中状态，改为受控模式即可实现需求，修改点如下：

1. 给Select组件添加value属性绑定状态，替换原有defaultValue，默认显示内容改用placeholder属性定义
2. 在onChange回调中判断选中值，如果是删除选项对应的delete值，就把状态重置为初始值-1，否则正常更新选中值

修改后的完整代码：

import st from "./AddToCartDropdown.module.css";
import {useState} from 'react';

import { Select } from 'antd';
import { DeleteFilled } from '@ant-design/icons';

const { Option } = Select;

function loopStock(n, selectedIndex){
    var elements = [];
    for(let i = 1; i <= n; i++){
      const qty = String(i);
      const resultQty = qty.concat(" in cart");
      elements.push(<Option value={i}> <span className={st.addToCartSelect}> {i === selectedIndex ? resultQty : i} </span></Option>);
    }
    return elements;
}

const AddToCart = () => {
  const [selectedIndex, setSelectedIndex] = useState(-1);
  const onChange = (newSelectedIndex) => {
    // 匹配删除选项的value，触发重置逻辑
    if(newSelectedIndex === 'delete') {
      setSelectedIndex(-1);
      return;
    }
    setSelectedIndex(newSelectedIndex);
  }
  
  return (
    <div >
      <Select 
        // 受控绑定值，为初始值-1时设置为undefined触发显示占位符
        value={selectedIndex === -1 ? undefined : selectedIndex}
        placeholder="Add to Cart" 
        onChange={onChange} 
        className={st.addToCartDefault} 
        bordered={false}
      >
        <Option value="delete"> <DeleteFilled /> </Option>
        {loopStock(5, selectedIndex)}
      </Select>
    </div>
  );
};

export default AddToCart;

注：代码中将new String(i)简化为String(i)，避免生成不必要的字符串包装对象，不影响原有逻辑。

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