React AntD Select：如何点击按钮后才渲染选中值

你的需求是让Select仅在点击「Add Item」按钮时才渲染选中值，核心问题是没有在按钮点击事件中把临时存储的选中值同步到Select绑定的values状态。当前selectedValues只是临时保存了用户选择的内容，但Select的value属性绑定的是values，所以需要在handleUpdateValues里更新这个状态。

修改后的代码 #

import React, { useState } from "react";
import { Select, Button } from "antd";
import { PlusOutlined } from '@ant-design/icons';

export const AntdSelect = () => {
    const [items, setItems] = useState([
        {
            value: "Jack",
            label: "Jack (100)",
        },
        {
            value: "Lucy",
            label: "Lucy (101)",
        },
    ]);
    const [values, setValues] = useState([]);
    const [selectedValues, setSelectedValues] = useState([]);

    const handleUpdateValues = () => {
        // 点击按钮时，将临时选中值同步到Select绑定的values状态
        setValues([...selectedValues]);
    };

    const handleChange = (value) => {
        // 仅临时保存用户的选择，不直接更新Select的显示值
        setSelectedValues(value);
    };

    return (
        <>
            <Select
                mode="multiple"
                allowClear
                labelInValue
                style={{ width: 500 }}
                placeholder="custom dropdown render"
                onChange={handleChange}
                value={values}
                options={items}
            />
            <Button
                type="text"
                icon={<PlusOutlined />}
                onClick={handleUpdateValues}
            >
                Add item
            </Button>
        </>
    );
};

关键说明 #

• handleChange只负责把用户当前的选择存入selectedValues临时状态，此时Select不会立刻渲染选中结果，因为value绑定的是values。
• 点击「Add Item」按钮时，handleUpdateValues会把selectedValues的值同步到values，触发Select重新渲染，显示选中的选项。
• 如果需要追加选中项而不是替换现有值，可以把setValues([...selectedValues])改成去重后的追加逻辑：

  setValues(prev => {
    // 合并新旧值并去重
    const mergedValueSet = new Set([...prev.map(item => item.value), ...selectedValues.map(item => item.value)]);
    // 转换回Select需要的labelInValue格式
    return Array.from(mergedValueSet).map(value => items.find(item => item.value === value));
  });
  

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