Javascript 如何使用自定义'；编辑组件'；在材料表中？

我试图在我的项目中使用“材料表”。我的“图标”列包含图标名称。我需要通过从外部对话框中选择来更改此图标。 我无法从外部对话框更新表数据。当我使用“输入”元素并更改图标名称时，它工作正常

editComponent: props => (
  <input
    type="text"
    value={props.value}
    onChange={e => props.onChange(e.target.value)}
  />
)

editComponent:props=>(
props.onChange（e.target.value）}
/>
)

我不知道，如何通过对话获得这个结果。 我创建了以下截图项目，以详细显示我需要的内容：

当我通过文本更改图标名称并保存更改时-可以。将保存更改。 当我通过从外部对话框中选择图标并保存更改来更改图标时，它不起作用

editComponent: props => (
  <SelectIconDialog
    value={props.value}
    onChange={e => props.onChange(e.target.value)}
  />
)

editComponent:props=>(
props.onChange（e.target.value）}
/>
)

我不知道如何调用“SelectIconDilog”中道具给出的“onChange”

export default function SelectIconDialog(props) {
    const { value, onChange } = props;
    const [open, setOpen] = React.useState(false);
    const [selectedValue, setSelectedValue] = React.useState(value);

    function handleClickOpen() {
        setOpen(true);
    }

    const handleClose = value => {
        setOpen(false);
        setSelectedValue(value);
        //onChange(value); // it doesn't work
    };

    return (
        <div>
            <Tooltip title={selectedValue}>
                <IconButton
                    onClick={handleClickOpen}
                    color="default"
                >
                    <DynamicIcon 
                        iconName={selectedValue} 
                        // onChange={onChange} // it doesn't work
                    />
                </IconButton>
            </Tooltip>
            <SimpleDialog selectedValue={selectedValue} open={open} onClose={handleClose} />
        </div>
    );
}

导出默认功能SelectIconDialog（道具）{
const{value，onChange}=props；
const[open，setOpen]=React.useState（false）；
常量[selectedValue，setSelectedValue]=React.useState（值）；
函数handleClickOpen（）{
setOpen（真）；
}
const handleClose=值=>{
setOpen（假）；
设置选定值（值）；
//onChange（value）；//它不起作用
};
返回(
在
SelectIconDialog
中使用
onChange={e=>props.onChange（e）}
，因为
e
是图标名称，您希望将其分配给
输入

const[state，setState]=React.useState({
栏目：[
{
...
editComponent:props=>(
)
},
...
}

此外，在
SimpleDialog
中，由于没有为
iconNames
分配唯一键，因此出现错误，请尝试：


{iconNames.map（（iName，key）=>(
handleItemClick（iName）}>
))}
;

演示：

标题：“标题”，
字段：“fieldname”，
render:rowData=>{findStock（rowData.fieldname）}，
editComponent:props=>
props.onChange（e.value）}
name='fieldname'
自动对焦
文本字段道具={{
标签：“字段名”，
InputLabelProps：{
心理医生：是的，
},
变体：“概述”，
}}
选项={stocks.map（（项目）=>({
值：item.id，
标签：item.name，
}))}
/>
您能解释一下您的纯代码解决方案吗。
  title: "title",
  field: 'fieldname',
  render: rowData => <span>{findStock(rowData.fieldname)}</span>,
  editComponent: props =>
    <Select
      value={{ value: props.value, label: findStock(props.value) }}
      onChange={e => props.onChange(e.value)}
      name='fieldname'
      autoFocus
      textFieldProps={{
        label: "fieldname" ,
        InputLabelProps: {
          shrink: true,
        },
        variant: 'outlined',
      }}
      options={stocks.map((item) => ({
        value: item.id,
        label: item.name,
      }))}
     />