无法在CreatableSelect 上创建新的react-select

Question

import React from "react";
import Select from "react-select";
import CreatableSelect from "react-select/creatable";

const CustomSelect = ({
    maxSelect,
    isLoading,
    ref,
    inputClass,
    isCreatable,
    placeholder,
    options,
    onChange,
    closeMenuOnSelect,
    formatCreateLabel,
    onCreateOption,
    onInputChange,
    getOptionLabel,
    getOptionValue,
    value,
    isMulti,
    ...restSelectProp
}) => {
    if (isCreatable) {
        return (
            <div className="w-full flex flex-col items-start gap-1">
                <CreatableSelect
                    ref={ref}
                    unstyled
                    value={value}
                    options={options}
                    maxMenuHeight={150}
                    isOptionDisabled={() => value?.length >= maxSelect}
                    isLoading={isLoading}
                    placeholder={placeholder || "Select.."}
                    getOptionLabel={getOptionLabel}
                    getOptionValue={getOptionValue}
                    onInputChange={onInputChange}
                    onCreateOption={onCreateOption}
                    formatCreateLabel={(inputValue) => `Create...... "${inputValue}"`}
                    className={`w-full border border-theme-secondary border-opacity-30 rounded-lg flex items-center justify-between text-sm sm:text-base ${inputClass}`}
                    classNames={{
                        input: () => "[&_input:focus]:ring-0",
                        control: () => "w-full h-full px-3 py-2 md:px-4 md:py-3 rounded-lg",
                        valueContainer: () => "gap-1",
                        multiValue: () =>
                            "bg-theme-secondary px-2 py-1 rounded-md text-theme-secondary bg-opacity-10 gap-2 text-sm capitalize",
                        menu: () =>
                            "rounded-xl bg-theme-white border border-theme-secondary border-opacity-10 p-1.5 mt-1 shadow-xl",
                        option: ({ isFocused, isSelected }) => {
                            if (isSelected) {
                                return "hover:cursor-pointer bg-theme-secondary bg-opacity-10 text-theme-secondary px-3 py-2 md:px-3 md:py-2 rounded-lg my-0.5 ";
                            } else {
                                return "hover:bg-theme-secondary hover:bg-opacity-5 transition-all my-0.5 hover:text-theme-secondary px-3 py-2 md:px-3 md:py-2 rounded-lg ";
                            }
                        },
                    }}
                    {...restSelectProp}
                    closeMenuOnSelect={closeMenuOnSelect || false}
                    isMulti={isMulti || false}
                    onChange={(e) => {
                        onChange(e);
                    }}
                />
            </div>
        );
    } else {
        return (
            <div className="w-full flex flex-col items-start gap-1">
                <Select
                    ref={ref}
                    unstyled
                    value={value}
                    options={options}
                    maxMenuHeight={150}
                    isOptionDisabled={() => value?.length >= maxSelect}
                    isLoading={isLoading}
                    placeholder={placeholder || "Select.."}
                    getOptionLabel={getOptionLabel}
                    getOptionValue={getOptionValue}
                    onInputChange={onInputChange}
                    className={`w-full border border-theme-secondary border-opacity-30 rounded-lg flex items-center justify-between text-sm sm:text-base ${inputClass}`}
                    classNames={{
                        input: () => "[&_input:focus]:ring-0",
                        control: () => "w-full h-full px-3 py-2 md:px-4 md:py-3 rounded-lg",
                        valueContainer: () => "gap-1",
                        multiValue: () =>
                            "bg-theme-secondary px-2 py-1 rounded-md text-theme-secondary bg-opacity-10 gap-2 text-sm capitalize",
                        menu: () =>
                            "rounded-xl bg-theme-white border border-theme-secondary border-opacity-10 p-1.5 mt-1 shadow-xl",
                        option: ({ isFocused, isSelected }) => {
                            if (isSelected) {
                                return "hover:cursor-pointer bg-theme-secondary bg-opacity-10 text-theme-secondary px-3 py-2 md:px-3 md:py-2 rounded-lg my-0.5 ";
                            } else {
                                return "hover:bg-theme-secondary hover:bg-opacity-5 transition-all my-0.5 hover:text-theme-secondary px-3 py-2 md:px-3 md:py-2 rounded-lg ";
                            }
                        },
                        dropdownIndicator: () =>
                            "w-4 h-4 md:w-auto md:h-auto flex items-center justify-center",
                    }}
                    {...restSelectProp}
                    closeMenuOnSelect={closeMenuOnSelect || false}
                    isMulti={isMulti || false}
                    onChange={(e) => {
                        onChange(e);
                    }}
                />
            </div>
        );
    }
};

export default CustomSelect;

<CustomSelectController
    name="categories"
    isCreatable
    isMulti
    control={control}
    maxSelect={3}
    validation={VALIDATION.categoriesYouFocus}
    isLoading={isCategoryLoading}
    error={errors?.categories}
    label="What specific categories do you specialize in?"
    helpTxt="If you don't see your category listed, please enter it in the field provided."
    options={categoryList}
    getOptionLabel={(option) => option.name}
    onCreateOption={(inputValue) => {
        // Handle the creation of a new option here
        const newOption = {
            name: inputValue,
            id: inputValue,
        };
        setCategoryList([...categoryList, newOption]); // Update the list of categories
        setValue("categories", [
            ...(getValues("categories") || []),
            newOption,
        ]);
    }}
    formatCreateLabel={(inputValue) =>
        console.log("inputValue from create", inputValue)
    }
    getOptionValue={(option) => option.id}
    inputClass={errors?.categories && "error-input"}
    required
/>

创建新选项时，我没有收到“formatCreateLabel”。它在下拉列表中显示空字符串，但是当我单击下拉列表的空部分时，会创建该选项并将其添加到所选选项中。唯一的问题是它没有像“创建新...”那样显示“formatCreateLabel”。

请查看视频。

我正在显示来自 API 响应的下拉数据。如果选项不存在，则创建一个新选项。是因为我显示的是动态数据吗？

Answer 1

尝试创建一个新的单独函数：

const formatCreateLabel = (inputValue) =>

Create new... ${inputValue}

;

并将此函数调用到 props，例如：

formatCreateLabel={formatCreateLabel}

也在您正在使用的 creatableSelect 组件中

formatCreateLabel={(inputValue) =>

Create...... "${inputValue}"

您将值括在双引号中，这是错误的；