网格React React社区与MUI自动完成，未触发OnChange事件，并且触发了Inputchnge，但是该值不会更新

Question

试图与Aggrid React中的MUI自动完成，因为社区版本没有此功能，因此问题是自动完成的OnChange事件并没有触发，因此选择后的值空白。 建议我是否需要去MUI AutoComplete以外的其他东西。

//This is coldef
```` 
{
field: "currencyCode",
headerName: "Currency Code",
minWidth: 150,
editable: true,
cellEditor: AutoComplete,
cellEditorParams: {
  values: currency,
},
cellEditorPopup: true,
},
```` 
 ````    

//Autocomplete using MUI
import React, { useState, useEffect, forwardRef, useImperativeHandle } from 'react';
import { Autocomplete, TextField } from '@mui/material';

const CustomCAutoComplete = forwardRef((props, ref) => {
const [value, setValue] = useState(props.value || '');
const [inputValue, setInputValue] = useState('');

useEffect(() => {
 setValue(props.value || '');
}, [props.value]);
//triggers on change
const handleChange = (event, newValue) => {
 setValue(newValue);
 if (props.api) {
  props.api.stopEditing(false, newValue);
}
};
//triggers on type of each key
const handleInputChange = (event, newInputValue) => {
setInputValue(newInputValue);
};

useImperativeHandle(ref, () => ({
getValue: () => value,
}));

return (
<Autocomplete
  value={value}
  onChange={handleChange}
  inputValue={inputValue}
  onInputChange={handleInputChange}
  options={props.values}
  renderInput={(params) => <TextField {...params} />}
  freeSolo
 />
);
});

export default CustomCAutoComplete;
````

Answer 1

，我弄清楚了这个问题。问题在于行

api.stopEditing();

。您正在立即调用它，该它正在更新状态之前删除单元编辑器。因此，当称为

selectedValue

时，状态的值是空的，并且正在返回空字符串。

Solution：

在状态值发生变化后，在

getValue

挂钩中添加

useImperativeHandle

。 selectedValue AutoCompleteeditor

fulll代码

api.stopEditing()

检查工作演示：