Benutzerdefiniertes Textfeld in der Antd Select-Komponente

Question

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

Answer 1

try this one   
    
     import React from "react";
        import "./styles.css";
        import Select, { components } from "react-select";
        
        const CustomInput = (props) => {
          const { maxLength } = props.selectProps;
          const inputProps = { ...props, maxLength };
        
          return ;
        };
        
        const App = () => {
          const options = [
            { label: "Option 1", value: 1 },
            { label: "Option 2", value: 2 },
            { label: "Option 3", value: 3 }
          ];
        
          return (
            
          );
        };
        
        export default App;