Features:
1. To achieve recursive search recursive type of object data,
2. The list can display recursive data
3. Change directory in line with data showing the directory tree structure
function display:
index.js
import React, {Component} from 'react';
import data from './data';
class Documentation extends Component {
flag = false;
state = {
value: '',
searchLists: []
};
/**
* Recursive function to find the items contained
* Data to an array of recursive
* Value looking for content
* DataArr items returned by the array contained
*/
valueRecursion = (data, value,dataArr) => {
data.forEach(res => {
let content = '';
content = res.label;
res.actions.items.forEach(item => {
content += item.content;
});
if (content.includes(value)) {
dataArr.push (res);
}else if(res.items && res.items.length > 0) {
this.valueRecursion(res.items, value, dataArr)
}
});
return dataArr;
}
/**
* Get the value of the input box, and then recursively go and find items that contain the search content
*/
searchValue= (e) => {
let lists = this.valueRecursion(data.items, e.target.value,[]);
this.setState({
value: e.target.value,
searchLists: lists
});
}
/**
* Set dom sub display data and the refresh
*/
openChild = (res,numIndex)=> {
console.log(this.refs[res.id].childNodes);
let activeEle = this.refs[res.id];
let activeEleARR = activeEle.childNodes;
activeEleARR.forEach(res => {
if(res.nodeName === 'DIV') {
if(res.style.display === 'none') {
res.style.display = 'block';
} else {
res.style.display = 'none';
}
}
})
if(numIndex === 1) {
let allBrother = activeEle.parentNode.childNodes;
allBrother.forEach(res => {
if(res.nodeName === 'DIV' && res !== activeEle) {
res.childNodes.forEach(res => {
if (res.nodeName === 'DIV') {
res.style.display = 'none';
}
})
}
})
}
// The following data show the processing for each node
}
/**
* A list of all the items contained in the render
*/
searchList = (data,numIndex)=> {
numIndex numIndex = 1;
const list = [...data];
let lists = [];
lists = list.map((res) => {
return (
<div key={res.id} ref={res.id}
style={{marginLeft: `${(numIndex-1)*20}px`,display: numIndex === 1? 'block':'none'}}>
<span onClick={this.openChild.bind(this,res,numIndex)}>{res.label}</span>
{(res.items && res.items.length > 0)?this.searchList(res.items,numIndex):''}
</div>
)
})
return lists;
}
render() {
return (
<div>
<input type="text" value={this.state.value} onChange={this.searchValue} />
{this.state.searchLists.length > 0? this.searchList(this.state.searchLists,0):''}
</div>
);
}
}
export default Documentation;
data.js
const data = {
id: '00',
label: '00000000',
items: [
{
id: '0',
label: '0',
actions: {
items: [
{
content: '0'
},
{
content: '0'
}
]
},
items: [
{
id: '00',
label: '00',
actions: {
items: [
{
content: '00'
}
]
},
items: [
{
id: '000',
label: '000',
actions: {
items: [
{
content: '000'
}
]
},
items: [
{
id: '0000',
label: '0000',
actions: {
items: [
{
content: '0000'
}
]
}
},
{
id: '0001',
label: '0001',
actions: {
items: [
{
content: '0001'
}
]
}
}
]
},
{
id: '001',
label: '001',
actions: {
items: [
{
content: '001'
}
]
}
},
{
id: '002',
label: '002',
actions: {
items: [
{
content: '002'
}
]
}
}
]
},
{
id: '01',
label: '01',
actions: {
items: [
{
content: '01'
}
]
},
items: [
{
id: '001',
label: '001',
actions: {
items: [
{
content: '001'
}
]
}
}
]
}
]
},
{
id: '1',
label: '1',
actions: {
items: [
{
content: '1'
},
{
content: '1'
}
]
},
items: [
{
id: '10',
label: '10',
actions: {
items: [
{
content: '10'
},
{
content: '10'
}
]
}
},
{
id: '11',
label: '11',
actions: {
items: [
{
content: '11'
},
{
content: '11'
}
]
},
items: [
{
id: '110',
label: '110',
actions: {
items: [
{
content: '110'
},
{
content: '110'
}
]
}
},
{
id: '111',
label: '111',
actions: {
items: [
{
content: '111'
},
{
content: '111'
}
]
}
}
]
}
]
},
{
id: '2',
label: '2',
actions: {
items: [
{
content: '2'
},
{
content: '2'
}
]
},
items: []
}
]
};
export default data;