xgqfrms™, xgqfrms® : xgqfrms's offical website of GitHub!

redux & connect

import React, {
  Component,
  // useState,
  // useEffect,
} from 'react';

import { bindActionCreators } from 'redux';
import { connect } from 'dva';

import dashboardRegionActions from '../actions/dashboard.region.action';

// import { MapChart } from "../MapChart";
import { SelectOption } from "./SelectOption";
import { SearchInput } from "./SearchInput";

import * as Provinces from "../Region/provinces.json";

import './index.less';

import {
  Row,
  Col,
  // Input,
  // Icon,
  // Tag,
  // Select,
  // Tooltip,
  // Tabs,
  // Radio,
  // Checkbox,
  // Table,
  // Pagination,
} from "antd";

const mapStateToProps = ({ dashboard }) => ({
  regionData: dashboard.regionData,
  // mapLoading: dashboard?.mapLoading,
});

const mapDispatchToProps = dispatch => ({
  actions: bindActionCreators(dashboardRegionActions, dispatch),
});

@connect(mapStateToProps, mapDispatchToProps,)
class SelectableIndexList extends Component {
  constructor(props) {
    super(props);
    this.state = {
      placeholder: "请输入省份名或其拼音",
      provincesList: this.selectedFilter(Provinces.default),
      initProvincesList: this.selectedFilter(Provinces.default),
    };
  }
  selectedFilter = (provinces = []) => {
    return provinces.map(obj => {
      if (obj.key === "all") {
        obj.selected = true;
      } else {
        obj.selected = false;
      }
      return obj;
    });
  };
  formatAdcode = (code = "all") => {
    let adcode = 100000;
    if (code !== "all") {
      adcode = Number(`${code}0000`);
    }
    return adcode;
  };
  provincesFilter = (provincesList, key) => {
    const result = provincesList.map(({name, key: code,}) => {
      if (code === key) {
        return {
          name,
          key: code,
          selected: true,
        };
      } else {
        return {
          name,
          key: code,
          selected: false,
        };
      }
    }) || [];
    return result;
  }
  clickCheck = (key) => {
    const {
      // regionData,
      actions: {
        changeRegion,
      },
    } = this.props;
    const {
      provincesList,
      initProvincesList,
    } = this.state;
    const newProvincesList = this.provincesFilter(provincesList, key);
    const newInitProvincesList = this.provincesFilter(initProvincesList, key);
    this.setState({
      provincesList: newProvincesList,
      initProvincesList: newInitProvincesList,
    }, () => {
      // const code = this.formatAdcode(key);
      // changeRegion(code);
      changeRegion(`${key}`);
    });
  };
  handleCheckableTagChange = (value) => {
    const {
      // provincesList,
      initProvincesList: provincesList,
    } = this.state;
    let newProvincesList = provincesList.filter(({name, key, selected}) => {
      if (name.includes(value)) {
        return {
          name,
          key,
          selected,
        };
      }
    }) || [];
    this.setState({
      provincesList: newProvincesList,
    });
  };
  inputChangeHandle = (e) => {
    let value = e.target.value;
    this.handleCheckableTagChange(value);
  };
  render() {
    const {
      placeholder,
      provincesList,
    } = this.state;
    return (
      <>
        <Row className="selectable-index-list">
          <Col span={24} className="input-box">
            {
              SearchInput({
                placeholder: placeholder,
                inputChangeHandle: this.inputChangeHandle,
              })
            }
          </Col>
          <Col span={24} className="option-box">
            <SelectOption
              provincesList={provincesList}
              clickCheck={this.clickCheck}
            />
          </Col>
        </Row>
      </>
    );
  }
}

export {
  SelectableIndexList,
};

export default SelectableIndexList;

const mapStateToProps = ({ dashboard }) => ({
  regionData: dashboard.regionData,
  // mapLoading: dashboard?.mapLoading,
});

const mapDispatchToProps = dispatch => ({
  actions: bindActionCreators(dashboardRegionActions, dispatch),
});

// export default connect(
//   mapStateToProps,
//   mapDispatchToProps,
// )(RegionChart);
// @connect(mapStateToProps, mapDispatchToProps,)

---