antd-联动
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> ); } }
今日事今日毕