请稍等 ...
×

采纳答案成功!

向帮助你的同学说点啥吧!感谢那些助人为乐的人

作业1:省市区级联(react)

回答1 浏览122 2020-10-10 14:49:32
import React from 'react';

class ProvicesPage extends React.Component {

  constructor(prop) {
   super(prop) 
   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;

图片描述

添加回答

1回答

JavaScript版数据结构与算法 轻松解决前端算法面试

难度中级
时长15小时
人数822
好评度99.4%

夯实算法基础,填补技术短板,助力面试考题最后一公里

讲师

lewis Web前端工程师

曾就职于奇虎360、中科院计算所,现任BAT资深工程师,在React、Node.js、人工智能等领域具有丰富的开发经验。讲课深入浅出、旁征博引,极具个人风格。

意见反馈 帮助中心 APP下载
官方微信