如何在material-table中使用自定义'editComponent'?
How to use custom 'editComponent' in material-table?
我正在尝试在我的项目中使用 'material-table'。我的 'icon' 列包含图标名称。我需要通过从外部对话框中选择来更改此图标。
我在从外部对话框更新 table 数据时遇到问题。当我使用 'input' 元素并更改图标名称时,它可以正常工作。
editComponent: props => (
<input
type="text"
value={props.value}
onChange={e => props.onChange(e.target.value)}
/>
)
我不知道,如何通过我的对话实现这个结果。
我创建了以下片段项目来详细显示我需要的内容:https://codesandbox.io/embed/gifted-liskov-ih72m
当我通过文本更改图标名称并保存更改时 - 没问题。更改已保存。
当我通过从外部对话框中选择它来更改图标并保存更改时 - 它不起作用。
editComponent: props => (
<SelectIconDialog
value={props.value}
onChange={e => 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
中使用 onChange={e => props.onChange(e)}
,因为 e
是图标名称并且您想将其分配给您的 input
。
const [state, setState] = React.useState({
columns: [
{
...
editComponent: props => (
<SelectIconDialog value={props.value} onChange={props.onChange} />
)
},
...
}
此外,在 SimpleDialog
中,您收到错误消息,因为您没有为 iconNames
分配唯一键,尝试:
<div>
{iconsNames.map((iName, key) => (
<Tooltip title={iName} key={key}>
<IconButton onClick={() => handleItemClick(iName)}>
<DynamicIcon iconName={iName} />
</IconButton>
</Tooltip>
))}
</div>;
演示:
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,
}))}
/>
我正在尝试在我的项目中使用 'material-table'。我的 'icon' 列包含图标名称。我需要通过从外部对话框中选择来更改此图标。 我在从外部对话框更新 table 数据时遇到问题。当我使用 'input' 元素并更改图标名称时,它可以正常工作。
editComponent: props => (
<input
type="text"
value={props.value}
onChange={e => props.onChange(e.target.value)}
/>
)
我不知道,如何通过我的对话实现这个结果。 我创建了以下片段项目来详细显示我需要的内容:https://codesandbox.io/embed/gifted-liskov-ih72m
当我通过文本更改图标名称并保存更改时 - 没问题。更改已保存。 当我通过从外部对话框中选择它来更改图标并保存更改时 - 它不起作用。
editComponent: props => (
<SelectIconDialog
value={props.value}
onChange={e => 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
中使用 onChange={e => props.onChange(e)}
,因为 e
是图标名称并且您想将其分配给您的 input
。
const [state, setState] = React.useState({
columns: [
{
...
editComponent: props => (
<SelectIconDialog value={props.value} onChange={props.onChange} />
)
},
...
}
此外,在 SimpleDialog
中,您收到错误消息,因为您没有为 iconNames
分配唯一键,尝试:
<div>
{iconsNames.map((iName, key) => (
<Tooltip title={iName} key={key}>
<IconButton onClick={() => handleItemClick(iName)}>
<DynamicIcon iconName={iName} />
</IconButton>
</Tooltip>
))}
</div>;
演示:
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,
}))}
/>