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

Question

目前我正在处理材料表，并且我已经构建了自定义组件以在 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, 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);
}, []);

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","field":"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”中提到的解决方案

但我无法完全掌握这个概念。

Answer 1

我认为这会对你有所帮助。

{
  title: "Description",
  field: "description",
  editComponent: props => ( <
    Autocomplete options = {
      selectedProductOptions
    }
    getOptionLabel = {
      (option) => option.name
    }
    onChange = {
      e => {
        props.onChange(e.target.innerText)
      }
    }
    renderInput = {
      (params) =>
      <
      MuiTextField { ...params
      }
      helperText = {
        props.helperText
      }
      error = {
        props.error
      }
      variant = "standard" /
      >
    }
    />
  ),
  validate: (rowData) =>
    rowData.description === undefined ?
    {
      isValid: false,
      helperText: 'Required *'
    } :
    rowData.description === '' ?
    {
      isValid: false,
      helperText: 'Required *'
    } :
    true

},

我在这里使用了材料 ui 自动完成功能。你必须使用 onChange = {e => {props.onChange(e.target.innerText)}} 属性。

如果您需要更多解释，请随时询问