Reactjs AntD Select - 如何僅在單擊按鈕時呈現值

Question

我有一個 AntD select 和按鈕組件。

我希望 select 組件中的選定值僅在單擊“添加項目”按鈕時呈現（現在更新由 Select 組件的 onChange 道具觸發）。

現在我似乎無法弄清楚如何從 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 = () => {
        console.log(selectedValues);

    };
    const handleChange = (value) => {
        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>
        </>
    );
};

Answer 1

您的items state 最初需要是一個空數組。 在handleUpdateValues ，您應該使用具有值的實際數組更新setItems 。

編輯：更新沙箱以包含您的評論。

示例沙箱