Benutzerdefiniertes Textfeld in der Antd Select-Komponente
Ich möchte dem Benutzer die Möglichkeit geben, benutzerdefinierten Text hinzuzufügen, wenn die Auswahl, die er für geeignet hält, nicht zu den in der Option „Auswählen“ angezeigten Optionen gehört. Ich habe erfolgreich ein benutzerdefiniertes Textfeld erstellt, aber das Abrufen von Benutzereingaben und das Festlegen als Wert einer ausgewählten Komponente wird immer mühsamer (klingt einfach, funktioniert aber aus irgendeinem Grund nicht). Das ist meine Umsetzung
const [selectedpurpose, setSelectedPurpose] = useState<string>("");// selected value of the select component
const [customOption, setCustomOption] = useState<string>("");//custom userinput
const [dropoptions, setDropOptions] = useState([
{ value: "General Meeting", label: "General Meeting" },
{ value: "Consultation Meeting", label: "Consultation Meeting" },
{ value: "AdCampaign Meeting", label: "Ad Campaign Meeting" },
{ value: "Marketing Meeting", label: "Marketing Meeting" },
]);//select options
// function to recored custom user input
const handleAddOption = () => {
if (customOption) {
const newOption = { value: customOption, label: customOption };
setDropOptions([newOption, ...dropoptions]);
setSelectedPurpose(customOption);
setCustomOption("");
}
};
//my form
<Form.Item
name="purpose"
label="Purpose of Visit"
rules={[
{
required: true,
message: "Please select Purpose of Visit!",
},
]}
>
<Select
defaultActiveFirstOption={false}
value={selectedpurpose}
onChange={(e) => {
if (customOption) {
setSelectedPurpose(customOption);
}else{
setSelectedPurpose(e)
}
}}
dropdownRender={(menu) => (
<div>
{menu}
<div
style={{
display: "flex",
flexWrap: "nowrap",
padding: 8,
}}
>
<Input
style={{ flex: "auto" }}
maxLength={20}
value={customOption}
onChange={(e) => {
if (e.target.value.length > 20) {
// if user has reached the maximum length
// show a message or change the color of the input to indicate the limit has been reached
// for example:
openNotificationWithIcon(
"error",
"Warning",
"Maximum length reached!"
);
} else {
setCustomOption(e.target.value);
}
}}
onKeyDown={(e) => {
if (e.key === "Enter") {
handleAddOption();
}
}}
/>
<Button
type="link"
onClick={handleAddOption}
style={{ flex: "none", padding: "0px 4px" }}
>
Add
</Button>
</div>
</div>
)}
>
{dropoptions.map((option) => (
<Option key={option.value} value={option.value}>
{option.label}
</Option>
))}
</Select>
</Form.Item>
Was mache ich falsch? Laut meinem Code sollte das Klicken auf die Schaltfläche „Hinzufügen“ und das Drücken der Eingabetaste den neuen Wert zum Optionsarray hinzufügen und die Benutzereingabe als Wert der ausgewählten Komponente auswählen, aber bisher wird nur „Hinzufügen“ hinzugefügt zum Optionsarray und ignorieren Sie die Festlegung als Auswahlwert Danke für jede Hilfe
