如何在材料表中使用自定义'editComponent'? [英] How to use custom 'editComponent' in material-table?
问题描述
我正在尝试在项目中使用材料表".我的图标"列包含图标名称.我需要通过从外部对话框中选择它来更改此图标.我在从外部对话框更新表数据时遇到问题.当我使用'input'元素并更改图标名称时,它可以正常工作.
editComponent:props =>(<输入type ="text"值= {props.value}onChange = {e =>props.onChange(e.target.value)}/>)
我不知道如何在对话框中实现此结果.我创建了以下片段项目,以详细显示我需要的内容:
I'm trying to use 'material-table' in my project. My 'icon' column contains icon name. I need change this icon by selecting it from external dialog. I have problem with updating table data from external dialog. When I use 'input' element and I change icon name, it works correctly.
editComponent: props => (
<input
type="text"
value={props.value}
onChange={e => props.onChange(e.target.value)}
/>
)
I don't know, how to achive this result with my dialog. I've created the following snipped project to show in details what I need: https://codesandbox.io/embed/gifted-liskov-ih72m
When I change icon name by text and save changes - is OK. Changes are saved. When I change icon by selecting it from external dialog and save changes - it doesn't work.
editComponent: props => (
<SelectIconDialog
value={props.value}
onChange={e => props.onChange(e.target.value)}
/>
)
I don't know, how to invoke 'onChange' given by props inside the 'SelectIconDilog'.
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>
);
}
In SelectIconDialog
use onChange={e => props.onChange(e)}
, because e
is the icon name and you want to assign it to your input
.
const [state, setState] = React.useState({
columns: [
{
...
editComponent: props => (
<SelectIconDialog value={props.value} onChange={props.onChange} />
)
},
...
}
Moreover, in SimpleDialog
you getting an error because you didn't assign unique keys to your iconNames
, try:
<div>
{iconsNames.map((iName, key) => (
<Tooltip title={iName} key={key}>
<IconButton onClick={() => handleItemClick(iName)}>
<DynamicIcon iconName={iName} />
</IconButton>
</Tooltip>
))}
</div>;
Demo:
这篇关于如何在材料表中使用自定义'editComponent'?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!