材料表反应中的自定义自动完成

Question

我正在尝试在材料表中自定义自动完成。

为此，我正在遵循以下示例：

https://codepen.io/regexp/details/RwPNaLe

上面的过程是针对 Input Field in react 的，我试图将其合并到一个材料表列中。

const [item, setItem] = useState({
    code: '',
    name: '',
    unit: '',
    rate: ''
});

const [cursor, setCursor] = useState(0);

const [searchItems, setSearchItems] = useState([]);

const autocomplete = useCallback((evt) => {
    const text = evt.target.value;
    fetch(
        `https://invoiceitems.herokuapp.com/items?name_like=${text}&_limit=6`
    )
        .then((res) => res.json())
        .then((data) => {
            setSearchItems(data);
        });
}, []);

const handleKeyup = useCallback((evt) => {
    if (evt.keyCode === 27) {
        setSearchItems([]);
        return false;
    }
    return true;
}, []);

const handleKeydown = useCallback(
    (evt) => {
        // arrow up/down button should select next/previous list element
        if (evt.keyCode === 38 && cursor > 0) {
            setCursor((prevCursor) => prevCursor - 1);
        } else if (evt.keyCode === 40 && cursor < searchItems.length - 1) {
            setCursor((prevCursor) => prevCursor + 1);
        }

        if (evt.keyCode === 13) {
            let currentItem = searchItems[cursor];
            if (currentItem !== undefined) {
                const {code, name, unit, rate} = currentItem;
                setItem({code, name, unit, rate});
                setSearchItems([]);
            }
        }

        if (evt.keyCode === 8) {
            setItem({code: '', name: '', unit: '', rate: ''});
        }
    },
    [cursor, searchItems]
);

const selectItem = useCallback(
    (id) => {
        let selectedItem = searchItems.find((item) => item.code === id);
        const {code, name, unit, rate} = selectedItem;
        setItem({code, name, unit, rate});
        setSearchItems([]);
    },
    [searchItems]
);

const handleListKeydown = useCallback((evt) => {
    console.log(evt.keyCode);
}, []);

我试图在材料表中合并自动完成的列：

var columns = [
    {
        title: "Test", field: "test", editComponent: props => (
            
                <div className={'form-group'}>
                    <label htmlFor={'autocomplete'}>{'Item Name'}</label>
                    <input
                        type={'text'}
                        id={'autocomplete'}
                        onChange={autocomplete}
                        // onKeyUp={handleKeyup}
                        // onKeyDown={handleKeydown}
                        value={item.name}
                        className={'custom-input form-control'}
                    />
                    {searchItems.length > 0 && (
                <ul className={'list-group'}>
                    {searchItems.map((item, idx) => (
                        <li
                            className={
                                cursor === idx
                                    ? 'active list-group-item'
                                    : 'list-group-item'
                            }
                            key={idx}
                            onClick={() => selectItem(item.code)}
                            onKeyDown={handleListKeydown}>
                            {item.name}
                        </li>
                    ))}
                </ul>
            )}
                </div>

        )
    }]

但是一旦我开始输入它，字段就会消失，当我再次输入时，它会向我显示列表但没有设置值。

如何使它在材料表列中工作，就像在简单输入字段中工作一样？

如果有人需要更多信息或需要更清晰的信息，请告诉我。