深度优先遍历口诀
- 访问根节点
- 对根节点的children挨个进行深度优先遍历
import React from 'react';
class ProvicesPage extends React.Component {
constructor(props) {
super(props)
this.state = {
cityData: [],
areaData: [],
selectedProvice: '',
selectedCity: '',
selectedArea: '',
data: [
{
name: '广东省',
children: [
{
name: '深圳市',
children: [
{name: '南山区'},
{name: '福田区'},
{name: '宝安区'}
]
},
{
name: '广州市',
children: [
{name: '天河区'},
{name: '海珠区'},
{name: '番禹区'}
]
}
]
},
{
name: '浙江省',
children: [
{
name: '杭州市',
children: [
{name: '上城区'},
{name: '下城区'},
{name: '西湖区'}
]
},
{
name: '宁波市',
children: [
{name: '江北区'},
{name: '北仑区'},
{name: '鄞州区'}
]
}
]
}
]
}
}
componentDidMount() {
setTimeout(() => {
this.setState({
selectedProvice: this.state.data[0].name
});
if(this.state.selectedProvice) {
const cityData = this.fnGetChildren(this.state.data, this.state.selectedProvice);
this.setState({
cityData,
selectedCity: cityData[0]? cityData[0].name : ''
});
if(this.state.selectedCity) {
const areaData = this.fnGetChildren(this.state.data, this.state.selectedCity);
this.setState({
areaData,
selectedArea: areaData[0]? areaData[0].name : ''
});
}
}
}, 10);
}
onProviceChange = (e) => {
const value = e.currentTarget.value;
const cityData = this.fnGetChildren(this.state.data, value);
const areaData = this.fnGetChildren(this.state.data, cityData[0].name);
this.setState({
cityData,
areaData,
selectedProvice: value
});
}
onCityChange = (e) => {
const value = e.currentTarget.value;
const areaData = this.fnGetChildren(this.state.data, value);
this.setState({
areaData,
selectedCity: value
});
}
onAreaChange = (e) => {
const value = e.currentTarget.value;
this.setState({
selectedArea: value
})
}
fnGetChildren = (tree, targetName) => {
let childrenData = [];
const dfs = (node) => {
if(!node) return;
node.forEach(child => {
if(child.name === targetName) {
childrenData = child.children;
}
if(child.children) dfs(child.children)
})
}
dfs(tree);
return childrenData;
}
render() {
const {data,cityData,areaData} = this.state;
return (
<>
<label>省份</label>
<select className="select-item" onChange={this.onProviceChange}>
{data.map((item) =>
<option value={item.name} key={item.name}>{item.name}</option>
)}
</select>
<label>市</label>
<select className="select-item" onChange={this.onCityChange}>
{cityData.map(item =>
<option value={item.name} key={item.name}>{item.name}</option>
)}
</select>
<label>区</label>
<select className="select-item" onChange={this.onAreaChange}>
{areaData.map(item =>
<option value={item.name} key={item.name}>{item.name}</option>
)}
</select>
</>
)
}
}
export default ProvicesPage;