Antd Select组件上的自定义文本框

Question

如果用户认为适合的选择不在“选择”选项中显示的选项中，我想让用户能够添加自定义文本。我已经成功创建了自定义文本字段，但是获取用户输入并将其设置为选择组件的值变得很痛苦（听起来很容易做到，但由于某种原因它不工作） 这是我的实现

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>

我做错了什么，根据我的代码，单击添加按钮按钮并按 Enter 键应该将新值添加到选项数组中，并选择用户输入作为选择组件的值，但到目前为止它只会将其添加到选项数组并忽略将其设置为选择值 感谢任何帮助

Answer 1

雷雷