AntDesign Select自定义下拉含Input时表单提交值优先级问题

我希望使用带有**自定义下拉菜单（Custom Dropdown）**的Select组件，用于展示预加载数据，且在数据不存在时可添加新项。

当前问题出在表单提交阶段：下拉菜单中渲染的Input组件会被表单读取其值，而非Select组件的选中值。

问题代码示例 #

const DropdownCustom = () => {
  const [items, setItems] = useState(['jack', 'lucy']);
  const [name, setName] = useState('');
  const inputRef = useRef(null);
  const onNameChange = (event) => {
    setName(event.target.value);
  };
  const addItem = (e) => {
    e.preventDefault();
    setItems([...items, name || `New item ${index++}`]);
    setName('');
    setTimeout(() => {
      inputRef.current?.focus();
    }, 0);
  };
  return (
    <Select
      style={{
        width: 300,
      }}
      placeholder="custom dropdown render"
      dropdownRender={(menu) => (
        <>
          {menu}
          <Divider
            style={{
              margin: '8px 0',
            }}
          />
          <Space
            style={{
              padding: '0 8px 4px',
            }}
          >
            <Input              
              placeholder="Please enter item"
              ref={inputRef}
              value={name}
              onChange={onNameChange}
              onKeyDown={(e) => e.stopPropagation()}
            />
            <Button type="text" icon={<PlusOutlined />} onClick={addItem}>
              Add item
            </Button>
          </Space>
        </>
      )}
      options={items.map((item) => ({
        label: item,
        value: item,
      }))}
    />
  );
};

解决方法 #

方案1：让表单忽略下拉中的Input #

Ant Design的Form会自动收集带有name属性的表单控件值，给下拉里的Input设置空name属性，就能阻止表单读取它的值：

<Input              
  placeholder="Please enter item"
  ref={inputRef}
  value={name}
  onChange={onNameChange}
  onKeyDown={(e) => e.stopPropagation()}
  name="" // 关键：空name会被Form忽略
/>

方案2：明确绑定Select与表单字段 #

通过Form的API直接绑定Select的选中值到表单字段，确保表单只收集Select的值：

// 先获取Form实例
const [form] = Form.useForm();

// 在Select组件中添加绑定逻辑
<Select
  style={{ width: 300 }}
  placeholder="custom dropdown render"
  value={form.getFieldValue('selectItem')}
  onChange={(value) => form.setFieldValue('selectItem', value)}
  dropdownRender={(menu) => { /* 原有下拉内容 */ }}
  options={items.map(item => ({ label: item, value: item }))}
/>

可选优化：添加新项后自动选中 #

在addItem函数中，新增项后直接让Select选中该值，提升体验：

const addItem = (e) => {
  e.preventDefault();
  const newItem = name || `New item ${index++}`;
  setItems([...items, newItem]);
  setName('');
  // 自动选中新增项
  form.setFieldValue('selectItem', newItem);
  setTimeout(() => {
    inputRef.current?.focus();
  }, 0);
};

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