Antd AutoComplete不会保留输入内容并将其重新显示为一个小盒子

问题描述

我已经尝试将antd更新到最新版本...并尝试了受控/不受控制的方式，但是我似乎无法理解为什么在输入内容时，这个组件会简单地重新呈现到一个小盒子中。

GIF of AutoComplete box behaviour

请在下面找到我的最新尝试，非常感谢您提供的见识；

import React,{ useState,useEffect } from 'react';
import { AutoComplete } from 'antd';
import { useQuery } from '@apollo/react-hooks';
import { withGroupsQuery } from './query';

const AutoCompleteField = props => {
    const [search,setSearch] = useState('');
    const { loading,error,data } = useQuery(withGroupsQuery,{
        variables: {
            search: search || undefined,...other
        }
    })

    let options = []
    if (data) {
        options = parseGroupNode(data.groups).concat(parseUserNode(data.searchUsers))
    }

    const autoprops = {
        options,onSelect: (selected,option) => {
            if (props.onSelect) {
                props.onSelect(selected,option.label,option.group);
            }
        },onChange: search => {
            setSearch(search);
        },placeholder: props.placeholder,value: search,};

    return (
        <AutoComplete {...autoprops}/>
    )

解决方法

您需要指定宽度。所有examples in antd's documentation都有一个明确的宽度。试试：

 <AutoComplete style={{ width: 200 }} {...autoProps}/>