javascript - 对 React 中的复选框树有任何帮助吗?
问题描述
我是 React 的新手。抱歉提问。我想用下面的db.json
文件在 React 中创建一个复选框树。我怎样才能创建它?我react-checkbox-tree
在 NPM 中找到了一些东西,但是当我检查一个项目时,所有项目都被选中。
我做了 npm 页面中提到的所有事情,react-checkbox-tree
但没有成功。
{
"mailProcessingCenters": [
{
"code": "AIAXAA",
"name": "ANGUILLA"
}
],
"code": "J1CA18",
"shortCode": "A18",
"shortName": "AnguillaPost"
},
{
"mailProcessingCenters": [],
"code": "J1CADA",
"shortCode": "ADA",
"shortName": "AndorraPost"
},
{
"mailProcessingCenters": [
{
"code": "AEAUHA",
"name": "ABU DHABI"
},
{
"code": "AEDXBA",
"name": "DUBAI"
},
{
"code": "AEDXBB",
"name": "DUBAI RASID SEA-PORT"
},
{
"code": "AEDXBD",
"name": "DUBAI TRANSIT / HUB"
},
{
"code": "AEDXBE",
"name": "DUBAI - SOMALIA"
},
{
"code": "AUSYDK",
"name": "SYDNEY K (EMIRATES - DIRECT LINK)"
},
{
"code": "GBLONO",
"name": "LONDON"
},
{
"code": "SGSINO",
"name": "SINGAPORE"
},
{
"code": "SGSINQ",
"name": "SINGAPORE Q, UAE"
},
{
"code": "USCHIE",
"name": "CHICAGO E"
},
{
"code": "USJECU",
"name": "NEW JERSEY U EMIRATES POST"
}
],
"code": "J1CAEA",
"shortCode": "AEA",
"shortName": "EmiratesPost"
},
{
"mailProcessingCenters": [
{
"code": "AFKBLA",
"name": "KABUL"
},
{
"code": "AFKBLC",
"name": "KABUL C"
},
{
"code": "AFKBLS",
"name": "KABUL EMS SHAHEEN POST"
}
],
"code": "J1CAFA",
"shortCode": "AFA",
"shortName": "Afghan Post"
}
]
这是我的应用程序组件:
import React from 'react';
import db from './assets/data.json'
import CheckboxTree from 'react-checkbox-tree';
import 'react-checkbox-tree/src/less/react-checkbox-tree.less';
import DataTable from 'react-data-table-component';
const data = [{ id: 1, title: 'Conan the Barbarian', year: '1982' },
{ id: 2, title: 'XXXX', year: '1984' }];
const columns = [
{
name: 'Title',
selector: 'title',
sortable: true,
},
{
name: 'Year',
selector: 'year',
sortable: true,
right: true,
},
];
class App extends React.Component {
state = {
checked: [],
expanded: [],
database : db
}
render() {
return (
<div >
<DataTable
title="Arnold Movies"
columns={columns}
data={data}
/>
<CheckboxTree
nodes={this.state.database}
key={this.state.database.code}
checked={this.state.checked}
expanded={this.state.expanded}
onCheck={checked => this.setState({ checked })}
onExpand={expanded => this.setState({ expanded })}
/>
))
}
</div>
)
}
}
export default App;
解决方案
我已在代码沙箱中更新了您的代码,请查看链接:demo
您需要像库支持的那样重新定义或更改您的 data.json 对象。
例如
const nodes = [{
value: 'mars',
label: 'Mars',
children: [
{ value: 'phobos', label: 'Phobos' },
{ value: 'deimos', label: 'Deimos' },
],
}];
这是您需要更新的示例,希望对您有所帮助。
应用程序.js
import React from 'react';
import db from './assets/data.json'
import CheckboxTree from 'react-checkbox-tree';
import 'react-checkbox-tree/src/less/react-checkbox-tree.less';
import DataTable from 'react-data-table-component';
const data = [{ id: 1, title: 'Conan the Barbarian', year: '1982' },
{ id: 2, title: 'XXXX', year: '1984' }];
const columns = [
{
name: 'Title',
selector: 'title',
sortable: true,
},
{
name: 'Year',
selector: 'year',
sortable: true,
right: true,
},
];
class App extends React.Component {
state = {
checked: [],
expanded: [],
database: db
}
render() {
return (
<React.Fragment>
<DataTable
title="Arnold Movies"
columns={columns}
data={data}
/>
<CheckboxTree
nodes={this.state.database}
key={this.state.database.code}
checked={this.state.checked}
expanded={this.state.expanded}
onCheck={checked => this.setState({ checked })}
onExpand={expanded => this.setState({ expanded })}
/>
</React.Fragment>
)
}
}
export default App;
数据.json
[
{
"value": "J1CA18",
"label": "AnguillaPost",
"mailProcessingCenters": [
{
"code": "AIAXAA",
"name": "ANGUILLA"
}
],
"code": "J1CA18",
"shortCode": "A18",
"shortName": "AnguillaPost"
},
{
"value": "J1CADA",
"label": "AndorraPost",
"mailProcessingCenters": [],
"code": "J1CADA",
"shortCode": "ADA",
"shortName": "AndorraPost"
},
{
"value": "J1CAEA",
"label": "EmiratesPost",
"mailProcessingCenters": [
{
"code": "AEAUHA",
"name": "ABU DHABI"
},
{
"code": "AEDXBA",
"name": "DUBAI"
},
{
"code": "AEDXBB",
"name": "DUBAI RASID SEA-PORT"
},
{
"code": "AEDXBD",
"name": "DUBAI TRANSIT / HUB"
},
{
"code": "AEDXBE",
"name": "DUBAI - SOMALIA"
},
{
"code": "AUSYDK",
"name": "SYDNEY K (EMIRATES - DIRECT LINK)"
},
{
"code": "GBLONO",
"name": "LONDON"
},
{
"code": "SGSINO",
"name": "SINGAPORE"
},
{
"code": "SGSINQ",
"name": "SINGAPORE Q, UAE"
},
{
"code": "USCHIE",
"name": "CHICAGO E"
},
{
"code": "USJECU",
"name": "NEW JERSEY U EMIRATES POST"
}
],
"code": "J1CAEA",
"shortCode": "AEA",
"shortName": "EmiratesPost"
},
{
"value": "J1CAFA",
"label": "Afghan Post",
"children": [
{
"value": "AFKBLA",
"label": "KABUL"
},
{
"value": "AFKBLC",
"label": "KABUL C"
},
{
"value": "AFKBLS",
"label": "KABUL EMS SHAHEEN POST"
}
],
"mailProcessingCenters": [
{
"code": "AFKBLA",
"name": "KABUL"
},
{
"code": "AFKBLC",
"name": "KABUL C"
},
{
"code": "AFKBLS",
"name": "KABUL EMS SHAHEEN POST"
}
],
"code": "J1CAFA",
"shortCode": "AFA",
"shortName": "Afghan Post"
}
]
我对data.json文件进行了一些更改,您需要以这种方式进行更改,您的问题将得到解决。
推荐阅读
- c# - Aurelia 使用 signalR 激活
- java - th:attr 将值属性显示为空字符串
- c++ - 什么是 std::allocator,我为什么需要它?
- javascript - 如何让我的 Javascript 识别在我的 HTML 中选择了哪个单选按钮选项?
- linux - 使用 parsecmgmt 构建 Parsec 重复数据删除工作负载失败
- javascript - 单击打开类的下拉菜单在新页面上不起作用
- apache - Apache Jmeter CSV Data Set Config Element 只读取 csv 的第一行
- javascript - XHRHttpRequest 到 Dropbox XHR 加载失败:选项
- sql-server - sql server - “当不使用 EXISTS 引入子查询时,选择列表中只能指定一个表达式。”
- c# - 将函数转换为 Rx