我正在使用
SortableJS
来表示 React
,并且我正在尝试实现水平 Grid
,以便最终结果如下所示:
我设法做到了这一点,但是排序功能根本不起作用。我认为这与
tag
属性有关。当我尝试 tag={Grid}
时,出现以下错误:
可排序:
el
必须是 HTMLElement,而不是 [object Object]
有什么想法可以将
Grid
实现为 tag
属性吗?这是我的代码:
<Grid container>
<Sortable options={{ fallbackOnBody: true, group: "items", handle: reorderHandle }} tag={Grid} onChange={handleChange}>
{items.map((item, index) =>
<Paper key={index} data-id={index} className={classes.item} elevation={0}>
<ButtonHelper {...getHandleClass(editable)} key={index} icon={
<Badge badgeContent={index + 1} color="default">
{editable && <ReorderIcon />}
</Badge>}
/>
<Grid item xs={4} key={index}>
<div className={classes.gridItem}>
<GalleryInput className={classes.image} style={{ width: '300px' }} label="image" source={`${source}[${index}].image`} />
<br></br>
<TextInput label="desc" source={`${source}[${index}].desc`} />
{editable && <ButtonHelper icon={<RemoveIcon />} onClick={handleRemove(index)} className={classes.left} />}
</div>
</Grid>
</Paper>
)}
</Sortable>
</Grid>
感谢您的帮助。
由于您使用的是自定义组件,因此 tag 属性仅接受它作为 forwarRef 组件。
所以你需要以这种方式更新。
示例片段
// This is just like a normal component, but now has a ref.
const CustomComponent = forwardRef<HTMLDivElement, any>((props, ref) => {
return <div ref={ref}>{props.children}</div>;
});
export const BasicFunction: FC = props => {
const [state, setState] = useState([
{ id: 1, name: "shrek" },
{ id: 2, name: "fiona" }
]);
return (
<ReactSortable tag={CustomComponent} list={state} setList={setState}>
{state.map(item => (
<div key={item.id}>{item.name}</div>
))}
</ReactSortable>
);
};
尝试将 Paper 组件放入 div 中