小编ks0*_*099的帖子

如何在材料表中使用自定义“editComponent”?

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

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

我不知道如何通过我的对话框达到这个结果。我创建了以下片段项目来详细显示我需要的内容: https: //codesandbox.io/embed/gifted-liskov-ih72m

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

editComponent: props => (
  <SelectIconDialog
    value={props.value}
    onChange={e => props.onChange(e.target.value)}
  />
)
Run Code Online (Sandbox Code Playgroud)

我不知道如何调用“SelectIconDilog”内的 props 给出的“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 …
Run Code Online (Sandbox Code Playgroud)

javascript reactjs material-ui material-table

4
推荐指数
1
解决办法
1万
查看次数

标签 统计

javascript ×1

material-table ×1

material-ui ×1

reactjs ×1