ant Select 联动

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={{ width: 120 }}
          onChange={this.handleProvinceChange}
        >
          {provinceData.map(province => <Option key={province}>{province}</Option>)}
        </Select>
        <Select
          style={{ width: 120 }}
          value={this.state.secondCity}
          onChange={this.onSecondCityChange}
        >
          {cities.map(city => <Option key={city}>{city}</Option>)}
        </Select>
      </React.Fragment>
    );
  }
}

2.推荐

Cascader级联选择

.