antd-联动

Posted 2020-11-21 gjack

import React,{Component} from ‘react‘;
import { Select } from ‘antd‘;

const Option = Select.Option;

const provinceData = [‘Zhejiang‘, ‘Jiangsu‘];
const cityData = {
  Zhejiang: [‘h20‘,‘h21‘,‘h22‘],
  Jiangsu: [‘h31‘, ‘h32‘],
};
const cityData1 = {
  h20: [‘h43‘, ‘h44‘, ‘h45‘],
  h21: [‘h46‘, ‘h47‘, ‘h48‘],
  h22: [‘h49‘, ‘h50‘, ‘h51‘],
  h31: [‘h59‘, ‘h60‘, ‘h61‘],
  h32: [‘h69‘, ‘h70‘, ‘h71‘],
};

export default class App extends Component {

  constructor(props){
    super(props)
    this.state ={
      cities: cityData[provinceData[0]],//获取所有省份内市  cityData[‘Zhejiang‘] => [‘h20‘,‘h21‘,‘h22‘]
      secondCity: cityData1[cityData[provinceData[0]][0]],//获取杭州市 cityData[‘Zhejiang‘][0] => [‘h33‘, ‘h34‘, ‘h35‘]
      secondCity1: cityData1[cityData[provinceData[0]][0]][0],
    }
  }

  //选择浙江省
  handleProvinceChange = (value) => {
    console.log(value) //输出  Zhejiang
    this.setState({
      cities: cityData[value],
      secondCity: cityData1[cityData[value][0]],
      secondCity1: cityData1[cityData[value][0]][0],
    });
    console.log(this.state)
  }

  onSecondCityChange = (value) => {
    console.log(value)//输出  h21
    console.log(this.state)
    this.setState({
      secondCity: cityData1[value],
      secondCity1: cityData1[value][0],
    });
  }

  onSecondCityChange1 = (value) => {
    console.log(value)
    console.log(this.state)
    this.setState({
      secondCity1: value,
    });
  }

  render() {
    const provinceOptions = provinceData.map(province => <Option key={province}>{province}</Option>);
    const cityOptions = this.state.cities.map(city => <Option key={city}>{city}</Option>);//浙江所有的区域
    const cityOptionss = this.state.secondCity.map(city => <Option key={city}>{city}</Option>);
    return (
      <div>
        <Select defaultValue={provinceData[0]} style={{ width: 90 }} onChange={this.handleProvinceChange}>
          {provinceOptions}
        </Select>
        <Select value={this.state.cities} style={{ width: 90 }} onChange={this.onSecondCityChange}>
          {cityOptions}
        </Select>
        <Select value={this.state.secondCity1} style={{ width: 90 }} onChange={this.onSecondCityChange1}>
          {cityOptionss}
        </Select>
      </div>
    );
  }
}