javascript - react-sortablejs - 在具有嵌套数组的对象上设置“onChange”方法
问题描述
我正在使用react-sortablejs库。尝试在列表中移动卡片时。我得到错误:
无法读取未定义的属性“地图”
我有一个密集的结构,它在这里迷路了。如何处理onChange
,以便我可以在控制台中看到列表中注释的顺序发生了变化。
演示在这里
import Sortable from 'react-sortablejs';
// Functional Component
const SortableList = ({ items, onChange }) => {
return (
<div>
<Sortable
tag="ul"
onChange={(order, sortable, evt) => {
console.log(order)
onChange(order);
}}
>
{items.listItems.map(val => {
return <li key={uniqueId()} data-id={val}>List Item: {val.title}</li>})
}
</Sortable>
</div>
);
};
class App extends React.Component {
state = {
item: {
id: "abc123",
name: "AAA",
lists: [
{
id: "def456",
list_id: "654wer",
title: 'List1',
desc: "description",
listItems: [
{
id: "ghj678",
title: "ListItems1",
listItemsId: "88abf1"
},
{
id: "poi098",
title: "ListItems2",
listItemsId: "2a49f25"
},
{
id: "1oiwewedf098",
title: "ListItems3",
listItemsId: "1a49f25dsd8"
}
]
},
{
id: "1ef456",
list_id: "654wer",
title: 'List 2',
desc: "description",
listItems: [
{
id: "1hj678",
title: "ListItems4",
listItemsId: "18abf1"
},
{
id: "1oi098",
title: "ListItems5",
listItemsId: "1a49f25"
},
{
id: "1oiwewe098",
title: "ListItems6",
listItemsId: "1a49f25dsd"
}
]
},
{
id: "2ef456",
title: 'List 3',
list_id: "254wer",
desc: "description",
listItems: [
{
id: "2hj678",
title: "ListItems7",
listItemsId: "28abf1"
},
{
id: "2oi098",
title: "ListItems8",
listItemsId: "234a49f25"
},
{
id: "df098",
title: "ListItems9",
listItemsId: "1asd8"
}
]
}
]
}
};
render() {
const c = this.state.item['lists'].map(item => { return item.listItems});
return (
this.state.item['lists'].map(item => {
return (<div>
{item.title}
<SortableList
key={uniqueId()}
items={item}
onChange={(item) => {
console.log(item)
this.setState({item});
}}
>
</SortableList>
</div>)
})
)
}
};
提前致谢。
解决方案
您必须更新代码中的一些更改。
更新SortableList
函数如下。
首先传入data-id={val.id}
,li
然后传入onChange
方法,您将收到order
with id
。因此,我们正在对记录进行排序。
const SortableList = ({ items, onChange }) => {
return (
<div>
<Sortable
tag="ul"
onChange={(order, sortable, evt) => {
items.listItems.sort(function(a, b){
return order.indexOf(a.id) - order.indexOf(b.id);
});
onChange(items);
}}
>
{items.listItems.map(val => {
return <li key={uniqueId()} data-id={val.id}>List Item: {val.title}</li>})
}
</Sortable>
</div>
);
};
更新组件的onChange
事件App
。
onChange={(item) => {
let itemObj = {...this.state.item};
itemObj.lists.map(x=>{
if(x.id === item.id) x = item;
});
this.setState({itemObj});
}}
就是这样!
这是为您提供的工作演示
https://stackblitz.com/edit/react-sortablejs-blzxwd
推荐阅读
- html - 上传照片按钮未打开任何窗口以从中选择文件
- node.js - npm config 并添加更多而不是仅使用 default.json
- python - ModelForm在Django中没有指定模型类错误
- azure - Azure DevOps 服务器无法使用作为订阅参与者的服务主体创建 Azure 资源
- javascript - Chartjs:使用 chartjs-plugin-datalabels 在较小的数据集中重叠数据标签
- python - OSError: [WinError 193] %1 在 python 中不是有效的 Win32 应用程序
- android - 从 searchView onClick 开始 Fragment
- pandas - Dataframe groupby 产生一个组两次
- vue.js - Nuxtjs Axios onRequest() 未针对 asnycData 请求执行
- amazon-web-services - 无法访问 S3 存储桶内容:访问被拒绝