Antd Select组件自定义输入值无法同步选中问题求助

希望用户在Antd Select组件的选项中没有合适选择时，可添加自定义文本。已实现自定义输入框，但点击Add按钮或按下回车键后，新选项能成功加入选项数组，却无法将用户输入设置为Select组件的选中值。以下是实现代码：

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>

核心问题有两个：

• Form.Item的name属性接管了Select的状态控制
  Antd的Form组件会通过name="purpose"绑定表单字段值，此时Select的value属性虽然设置为selectedpurpose，但实际选中值由Form内部维护，手动调用setSelectedPurpose不会同步到表单，导致Select显示的选中值不更新。

• Select的onChange逻辑存在冗余干扰
  onChange里判断customOption的逻辑完全没必要，正常选中已有选项时，直接设置selectedpurpose即可，这段逻辑反而会在某些场景下覆盖正确的选中值。

解决步骤： #

方法一：用Form实例同步更新字段值

首先获取Form实例（若未创建）：

const [form] = Form.useForm();

在Form组件上绑定form={form}，然后修改handleAddOption函数：

const handleAddOption = () => {
  if (customOption) {
    const newOption = { value: customOption, label: customOption };
    setDropOptions([newOption, ...dropoptions]);
    // 同步更新Form字段值
    form.setFieldsValue({ purpose: customOption });
    setSelectedPurpose(customOption);
    setCustomOption("");
  }
};

方法二：移除Form.Item对Select的控制（无需表单联动时）

若该Select不需要和其他表单字段联动，可去掉Form.Item的name属性，同时修正Select的onChange逻辑：

<Select
  defaultActiveFirstOption={false}
  value={selectedpurpose}
  onChange={(e) => {
    setSelectedPurpose(e); // 直接设置选中值
  }}
  // 其余属性保持不变
>

额外优化：修正Input的maxLength处理

原代码中Input的长度判断逻辑可简化，直接利用maxLength限制输入，仅在达到长度时触发提示：

<Input
  style={{ flex: "auto" }}
  maxLength={20}
  value={customOption}
  onChange={(e) => {
    setCustomOption(e.target.value);
    if (e.target.value.length === 20) {
      openNotificationWithIcon(
        "error",
        "Warning",
        "Maximum length reached!"
      );
    }
  }}
  onKeyDown={(e) => {
    if (e.key === "Enter") {
      handleAddOption();
    }
  }}
/>

内容的提问来源于stack exchange，提问作者louis