Я использую React-Select для отображения выпадения creatableselect . Это выпадение контролируется с использованием react-hook-form . Я внедрил обработчик OncreateOption на CreatableAbleElect. Затем мой обработчик показывает модальный (React Bootstrap), который позволяет пользователю заполнять все детали, а затем сохранять элемент. Этот модальный компонент затем вызывает функцию, которая предоставляется ей, что позволяет компоненту SELECT прослушать изменения. По сути, добавленный элемент успешно сохраняется, и идентификатор для этого элемента возвращается (который может быть оптимизирован, но на данный момент это не похоже на точку). const onCreateItem = (itemID: string) => {
setCreatingItem(false); // hide the modal
fetchReference(field.referencedModuleIdx, itemID).
then((reference) => {
let option: IconSelectOption = {
value: reference.id, id: reference.id, label: reference.name, iconUrl: reference.iconUrl
}
setOptions((options) => [...options, option]);
setSelectedValue(option); //no ?
setValue("inputfield-" + field.index, option); //no ?
}
);
}
< /code>
рассматриваемый компонент выглядит следующим образом: < /p>
return (
{creatingItem === true && }
{
return (
handleCreateOption(value)}
onChange={e => {
setSelectedValue(e as IconSelectOption);
renderProps.field.onChange(e);
}}
/>
);
}}
/>
)
< /code>
и имеет следующее определено: < /p>
const [creatingItem, setCreatingItem] = useState(false);
const [options, setOptions] = useState(getOptions());
const [selectedValue, setSelectedValue] = useState(getCurrentValue());
const [input, setInput] = useState("");
const { setValue } = useForm();
const { register } = useFormContext();
< /code>
И именно здесь я застрял; < /p>
Я действительно добавляю элемент в список параметров; Это активно показывает, и я могу выбрать его. < /li>
Но я не могу сделать его выбранным значением. < /li>
< /ul>
Я все еще довольно новичок в реагировании. Я подумал, что я могу обновлять/обновить выбор или обновлять либо через контролируемое состояние selectedValue , либо либо через setValue из react-hook-form . Но что бы я ни делал, старое выбранное значение остается выбранным, и новое значение находится в списке, но остается невыбранным. < /P>
может кто -нибудь указать мне в правильном направлении? import { components, type ControlProps, type GroupBase, type OptionProps } from 'react-select'
import CreatableSelect from 'react-select/creatable';
import type { JSX } from 'react/jsx-runtime';
import { useState } from 'react';
import type { InputFieldComponentProps } from './dc_input_field';
import { useFormContext, Controller, useForm } from 'react-hook-form';
import { ItemCreateModal } from '../../pages/item/item_create_modal';
import { fetchReference, type Reference } from '../../services/datacrow_api';
export interface IconSelectOption {
value: string;
label: string;
iconUrl: string;
id: string;
}
const { Option } = components;
const IconOption = (props: JSX.IntrinsicAttributes & OptionProps) => (
{props.data.iconUrl && (
[img]{props.data.iconUrl}
style={{ width: "24px", paddingRight: "8px" }}
/>
)}
{props.data.label}
);
export default function DcReferenceField({
field,
value,
references
}: InputFieldComponentProps) {
const [creatingItem, setCreatingItem] = useState(false);
const [options, setOptions] = useState(getOptions());
const [selectedValue, setSelectedValue] = useState(getCurrentValue());
const [input, setInput] = useState("");
const { setValue } = useForm();
const { register } = useFormContext();
function getCurrentValue() {
let idx = 0;
let selectedIdx = -1;
options.forEach((option) => {
if (option.value === (value as Reference).id)
selectedIdx = idx;
idx++;
});
return options[selectedIdx];
}
const handleCreateOption = (value: string) => {
setInput(value);
setCreatingItem(true);
}
const onCreateItem = (itemID: string) => {
setCreatingItem(false); // hide the modal
fetchReference(field.referencedModuleIdx, itemID).
then((reference) => {
let option: IconSelectOption = {
value: reference.id, id: reference.id, label: reference.name, iconUrl: reference.iconUrl
}
setOptions((options) => [...options, option]);
setSelectedValue(option); //no ?
setValue("inputfield-" + field.index, option); //no ?
}
);
}
function getOptions() {
let options: IconSelectOption[] = [];
if (references && references.items) {
references.items.map(reference =>
options.push({ id: reference.id, value: reference.id, label: reference.name, iconUrl: reference.iconUrl }),
);
}
return options;
}
const Control = ({ children, ...props }: ControlProps) => (
{( (selectedValue && selectedValue.iconUrl)) && (
[img]{selectedValue?.iconUrl}
)}
{children}
);
return (
{creatingItem === true && }
{
return (
handleCreateOption(value)}
onChange={e => {
setSelectedValue(e as IconSelectOption);
renderProps.field.onChange(e);
}}
/>
);
}}
/>
)
}
Подробнее здесь: https://stackoverflow.com/questions/795 ... t-selected
