React Hooks & react forwardRef hooks & useReducer

React Hooks & react forwardref hooks & useReducer

react how to call child component method in another child component

1. left index list => right map
2. right map back to default value, right child call left child methods ???

https://*.com/a/37950970/5934465

https://reactjs.org/docs/hooks-reference.html#usereducer

https://reactjs.org/docs/forwarding-refs.html

---

store wrapper bug

OK

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

class ChildA extends Component {
  constructor(props){
    super(props);
    this.state = {};
  }
  // clickRefTest = (key = ``) => {
  //   console.log(`ref click key`, key);
  // };
  clickCheck = (key) => {
    console.log(`ref click key`, key);
  };
  render() {
    return (
      <div>
        ChildA Components without @connect store
      </div>
    );
  }
}

// const ChildA = (props) => {
//   return (
//     <>
//       <div>
//         <button onClick={this.props.refClick}>Click</button>
//       </div>
//     </>
//   );
// };

export {
  ChildA,
};

export default ChildA;

bug

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

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

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

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

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

import './index.less';

import {
  Row,
  Col,
} from "antd";

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

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 => {
      obj.selected = obj.key === "all";
      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,}) => {
      return {
        name,
        key: code,
        selected: code === key,
      };
    }) || [];
    return result;
  };
  clickRefTest = (key = ``) => {
    console.log(`ref click key`, key);
  };
  clickCheck = (key) => {
    const {
      actions: {
        changeRegion,
      },
      customizeRefCallback,
    } = 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,
    }, () => {
      changeRegion(`${key}`);
      customizeRefCallback();
    });
  };
  handleCheckableTagChange = (value) => {
    const {
      initProvincesList: provincesList,
    } = this.state;
    const newProvincesList = provincesList.filter(obj => obj.name.includes(value)) || [];
    this.setState({
      provincesList: newProvincesList,
    });
  };
  inputChangeHandle = (e) => {
    const 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;

---

solution

@connect & withRef

missing null

OK

width !== with

withRef

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

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

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

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

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

import './index.less';

import {
  Row,
  Col,
} from "antd";

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

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

// 第四个参数 ??? withRef
@connect(mapStateToProps, mapDispatchToProps, null, { withRef: true,})
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 => {
      obj.selected = obj.key === "all";
      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,}) => {
      return {
        name,
        key: code,
        selected: code === key,
      };
    }) || [];
    return result;
  };
  clickRefTest = (key = ``) => {
    console.log(`ref click key`, key);
  };
  clickCheck = (key) => {
    const {
      actions: {
        changeRegion,
      },
      customizeRefCallback,
    } = 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,
    }, () => {
      changeRegion(`${key}`);
      customizeRefCallback();
    });
  };
  handleCheckableTagChange = (value) => {
    const {
      initProvincesList: provincesList,
    } = this.state;
    const newProvincesList = provincesList.filter(obj => obj.name.includes(value)) || [];
    this.setState({
      provincesList: newProvincesList,
    });
  };
  inputChangeHandle = (e) => {
    const 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;

---

withRef

https://github.com/reduxjs/react-redux/issues/1053

forwardRef

https://*.com/questions/53819335/withref-is-removed-to-access-the-wrapped-instance-use-a-ref-on-the-connected-c

https://medium.com/@mehran.khan/using-refs-with-react-redux-6-how-to-use-refs-on-connected-components-4b80d4ea7300

---

---

xgqfrms 2012-2020

www.cnblogs.com 发布文章使用：只允许注册用户才可以访问！

---