Kotak teks tersuai pada komponen Antd Select

Question

Saya ingin memberi pengguna keupayaan untuk menambah teks tersuai jika pilihan yang mereka fikir sesuai bukan antara pilihan yang ditunjukkan dalam pilihan "Pilih". Saya telah berjaya mencipta medan teks tersuai, tetapi mendapatkan input pengguna dan menetapkannya sebagai nilai komponen terpilih menjadi sakit (bunyinya mudah dilakukan, tetapi atas sebab tertentu ia tidak berfungsi) Ini adalah pelaksanaan saya

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>

Apa yang saya lakukan salah, mengikut kod saya, mengklik butang tambah butang dan menekan enter sepatutnya menambah nilai baharu pada tatasusunan pilihan dan pilih input pengguna sebagai nilai komponen pilih, tetapi setakat ini ia hanya menambahnya Tambah kepada tatasusunan pilihan dan abaikan menetapkannya sebagai nilai pilih Terima kasih atas sebarang bantuan

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;