在材料表中的自定义编辑组件中设置值

编程问答 2022-05-27

问题描述

目前我正在处理材料表，我已经构建了要在 editComponent 中呈现的自定义组件，但我无法在特定列中设置值。

假设我有列：

import AutoCompleteSample from './Autocomplete';

Const columns = [{"title":"Apple","field":"apple"},{"title:"Banana","field":"banana",editComponent:props=>(<AutoCompleteSample value={props.value}

onChange={props.onChange} />)}]

但我无法设置香蕉字段内的值。

Autocomplete.js：

function AutocompleteSample() {

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,rate});
                setSearchItems([]);
            }
        }

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

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

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

return (
    <div className={'container mt-3'}>
        <h1 className={'h2 text-center'}>{'Autocomplete Example'}</h1>
        <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>
    </div>
);
}

我可以将官方示例中给出的自定义方法设置为：

Const columns = [{"title":"Apple","field":"apple"}{"title:"Banana",editComponent:props=>(<input
    type="text"
    value={props.value}
    onChange={e => props.onChange(e.target.value)}
  /> )}]

但我想在我的项目中使用我的自定义组件。

我可以在输入中呈现我的选择项，但无法在字段中设置它。

P.S.：我已经完成了以下提到的解决方案：“https://stackoverflow.com/questions/56576286/how-to-use-custom-editcomponent-in-material-table”

但我不能完全理解这个概念。

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）

material-tablereact-hooks