1.代码
/** * 选择监区 组件 */ import React, { PureComponent } from 'react'; import PropTypes from 'prop-types'; import { Select } from 'antd'; import styles from './index.less'; const Option = Select.Option; const provinceData = ['Zhejiang', 'Jiangsu']; const cityData = { Zhejiang: ['Hangzhou', 'Ningbo', 'Wenzhou'], Jiangsu: ['Nanjing', 'Suzhou', 'Zhenjiang'], }; export default class SelectPrison extends PureComponent { constructor(props) { super(props); const value = props.value || {}; this.state = { cities: cityData[provinceData[0]], secondCity: cityData[provinceData[0]][0], }; } handleProvinceChange = (value) => { this.setState({ cities: cityData[value], secondCity: cityData[value][0], }); } onSecondCityChange = (value) => { this.setState({ secondCity: value, }); } // 改变日期 changeDateRange = (date, dateString) => { const onChange = this.props.onChange; if (onChange) { onChange(Object.assign({}, this.state, {start:dateString[0],end:dateString[1]})); } } render() { const { cities } = this.state; return ( <React.Fragment> <Select defaultValue={provinceData[0]} style={{ 120 }} onChange={this.handleProvinceChange} > {provinceData.map(province => <Option key={province}>{province}</Option>)} </Select> <Select style={{ 120 }} value={this.state.secondCity} onChange={this.onSecondCityChange} > {cities.map(city => <Option key={city}>{city}</Option>)} </Select> </React.Fragment> ); } }
2.推荐
Cascader级联选择
.