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://stackoverflow.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://stackoverflow.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 发布文章使用:只允许注册用户才可以访问!


React Hooks & react forwardRef hooks & useReducer的更多相关文章

  1. react之react Hooks

    函数组件,没有 class 组件中的 componentDidMount.componentDidUpdate 等生命周期方法,也没有 State,但这些可以通过 React Hook 实现. Rea ...

  2. 新玩具,React v16.7.0-alpha Hooks

    周五看见React v16.7.0-alpha Hooks,今早起来看见圈里已经刷屏了Hooks,正好周末,正好IG和G2的比赛还没开始,研究下... 刚刚接触react时候非常喜欢用函数式组件,因为 ...

  3. React的新特性 ---- Hooks ---- 的基本使用

    一.react-hooks概念 React中一切皆为组件,React中组件分为类组件和函数组件,在React中如果需要记录一个组件的状态的时候,那么这个组件必须是类组件.那么能否让函数组件拥有类组件的 ...

  4. [React] Fix "React Error: Rendered fewer hooks than expected"

    In this lesson we'll see an interesting situation where we're actually calling a function component ...

  5. React手稿之State Hooks of Hooks

    React Hooks React在16.7.0-alpha.0版本中提到了Hooks的概念,目前还是Proposal阶段. 官方也陈述,接下来的90%的工作会投入到React Hooks中. 从目前 ...

  6. React Hooks +React Context vs Redux

    React Hooks +React Context vs Redux https://blog.logrocket.com/use-hooks-and-context-not-react-and-r ...

  7. React的React.createRef()/forwardRef()源码解析(三)

    1.refs三种使用用法 1.字符串 1.1 dom节点上使用 获取真实的dom节点 //使用步骤: 1. <input ref="stringRef" /> 2. t ...

  8. GraphQL + React Apollo + React Hook 大型项目实战(32 个视频)

    GraphQL + React Apollo + React Hook 大型项目实战(32 个视频) GraphQL + React Apollo + React Hook 大型项目实战 #1 介绍「 ...

  9. React学习笔记-1-什么是react,react环境搭建以及第一个react实例

    什么是react?react的官方网站:https://facebook.github.io/react/下图这个就是就是react的标志,非常巧合的是他和我们的github的编辑器Atom非常相似. ...

随机推荐

  1. 【LinuxShell】cp 用法详解

    Linux cp命令主要用于复制文件或目录. -a:此选项通常在复制目录时使用,它保留链接.文件属性,并复制目录下的所有内容.其作用等于dpR参数组合. -d:复制时保留链接.这里所说的链接相当于Wi ...

  2. C# 8.0 可空(Nullable)给ASP.NET Core带来的坑

    Nullable reference types(可为空引用类型) 可为空引用类型不讲武德 C#8.0 引入了"可为空引用类型"和"不可为空引用类型",使我们能 ...

  3. 最短路-朴素版Dijkstra算法&堆优化版的Dijkstra

    朴素版Dijkstra 目标 找到从一个点到其他点的最短距离 思路 ①初始化距离dist数组,将起点dist距离设为0,其他点的距离设为无穷(就是很大的值) ②for循环遍历n次,每层循环里找出不在S ...

  4. SpringMVC传递JSON数据

    文章目录 一.前后端传递和接收JSON数据 1:是要Ajax默认格式来传递数据(*) 2:使用application/json格式来传递数据 二.spring-web.xml中需要如下配置 一.前后端 ...

  5. Linux常用命令详解(第二章)(cat、more、less、head、tail、clear、poweroff、reboot、alias、unalias、uname、hostname、history、whitch、wc、w、who、whoami、)

    本章命令(共18个): 1 2 3 4 5 6 7 8 9 10 cat more less head tail clear poweroff reboot alias unalias uname h ...

  6. Cisco的互联网络操作系统IOS和安全设备管理器SDM__备份和恢复Cisco 配置

    对路由器配置进行的任何修改存储在running-config文件中.如果在修改了running-config后没有输入copy run start命令,那么路由器重载或掉电后,修改的内容会丢失. 1. ...

  7. 力扣643.子数组最大平均数I-C语言实现

    题目 给定 n 个整数,找出平均数最大且长度为 k 的连续子数组,并输出该最大平均数. 示例: 输入:[1,12,-5,-6,50,3], k = 4 输出:12.75 解释:最大平均数 (12-5- ...

  8. Educational Codeforces Round 84 E. Count The Blocks

    传送门: 1327- E. Count The Blocks  题意:给你一个整数n,求10^n内(每个数有前导零)长度为1到n的块分别有多少个.块的含义是连续相同数字的长度. 题解:从n=1开始枚举 ...

  9. python代理池的构建4——mongdb数据库的增删改查

    上一篇博客地址:python代理池的构建3--爬取代理ip 一.mongdb数据库的增删改查(Mongo_pool.py) #-*-coding:utf-8-*- ''' 实现代理池的数据库模块 ●作 ...

  10. kubernetes实战-交付dubbo服务到k8s集群(二)交付jenkins到k8s集群

    首先下载jenkins镜像并上传到我们自己的私有仓库:7-200 # docker pull jenkins/jenkins:2.190.3 # docker tag 22b8b9a84dbe har ...