React Hooks & react forwardRef hooks & useReducer
React Hooks & react forwardref hooks & useReducer
react how to call child component method in another child component
- left index list => right map
- 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
xgqfrms 2012-2020
www.cnblogs.com 发布文章使用:只允许注册用户才可以访问!
React Hooks & react forwardRef hooks & useReducer的更多相关文章
- react之react Hooks
函数组件,没有 class 组件中的 componentDidMount.componentDidUpdate 等生命周期方法,也没有 State,但这些可以通过 React Hook 实现. Rea ...
- 新玩具,React v16.7.0-alpha Hooks
周五看见React v16.7.0-alpha Hooks,今早起来看见圈里已经刷屏了Hooks,正好周末,正好IG和G2的比赛还没开始,研究下... 刚刚接触react时候非常喜欢用函数式组件,因为 ...
- React的新特性 ---- Hooks ---- 的基本使用
一.react-hooks概念 React中一切皆为组件,React中组件分为类组件和函数组件,在React中如果需要记录一个组件的状态的时候,那么这个组件必须是类组件.那么能否让函数组件拥有类组件的 ...
- [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 ...
- React手稿之State Hooks of Hooks
React Hooks React在16.7.0-alpha.0版本中提到了Hooks的概念,目前还是Proposal阶段. 官方也陈述,接下来的90%的工作会投入到React Hooks中. 从目前 ...
- React Hooks +React Context vs Redux
React Hooks +React Context vs Redux https://blog.logrocket.com/use-hooks-and-context-not-react-and-r ...
- React的React.createRef()/forwardRef()源码解析(三)
1.refs三种使用用法 1.字符串 1.1 dom节点上使用 获取真实的dom节点 //使用步骤: 1. <input ref="stringRef" /> 2. t ...
- GraphQL + React Apollo + React Hook 大型项目实战(32 个视频)
GraphQL + React Apollo + React Hook 大型项目实战(32 个视频) GraphQL + React Apollo + React Hook 大型项目实战 #1 介绍「 ...
- React学习笔记-1-什么是react,react环境搭建以及第一个react实例
什么是react?react的官方网站:https://facebook.github.io/react/下图这个就是就是react的标志,非常巧合的是他和我们的github的编辑器Atom非常相似. ...
随机推荐
- python中贪婪与非贪婪
Python里数量词默认是贪婪的(在少数语言里也可能是默认非贪婪),总是尝试匹配尽可能多的字符: 非贪婪则相反,总是尝试匹配尽可能少的字符. 在"*","?", ...
- 挖掘隐藏在源码中的Vue技巧!
前言 最近关于Vue的技巧文章大热,我自己也写过一篇(vue开发中的"骚操作"),但这篇文章的技巧是能在Vue的文档中找到蛛丝马迹的,而有些文章说的技巧在Vue文档中根本找不到踪迹 ...
- HTTPS是怎么保证数据安全传输的?
前言 关于HTTPS的连接过程,也是老生常谈的话题了. 其中涉及到的数字证书.电子签名.SSL/TLS.对称加密.非对称加密的问题总是让人摸不清头脑,不知道怎么回答. 今天就和大家再熟悉熟悉这其中千丝 ...
- vue项目在IE下报 [vuex] vuex requires a Promise polyfill in this browser错误
ie浏览器下报错 vue刚搭建的项目,在谷歌浏览器能够正常访问,但是在ie11等ie浏览器下无法显示页面,打开控制台查看无报错信息,打开仿真一栏,提示[vuex] vuex requires a Pr ...
- c++11新特性实战(二):智能指针
c++11添加了新的智能指针,unique_ptr.shared_ptr和weak_ptr,同时也将auto_ptr置为废弃(deprecated). 但是在实际的使用过程中,很多人都会有这样的问题: ...
- labuladong 算法小抄
<labuladong的算法小抄官方完整版> 本书目前可以手把手带你解决 110 道 LeetCode 算法问题,而且在不断更 新,全部基于 LeetCode 的题目,涵盖了所有题型和技巧 ...
- jdk 安装过程配置环境变量 error 的解决过程
jdk 安装过程配置环境变量 error 的解决过程 问题背景: 我在安装 jdk 过程中在JAVA_HOME和path中添加路径后, cmd 中输入java 和javac均出现错误,因为之前在 D ...
- Cloudera Manager安装部署
1.连接阿里云服务器 打开远程连接工具进行配置,这里以CRT为例. 1)新建一个session 2)填写hostname(填写公网ip) 2.修改hosts [root@hadoop001 ~]# v ...
- 【noi 2.5_7834】分成互质组(dfs)
有2种dfs的方法: 1.存下每个组的各个数和其质因数,每次对于新的一个数,与各组比对是否互质,再添加或不添加入该组. 2.不存质因数了,直接用gcd,更加快.P.S.然而我不知道为什么RE,若有好心 ...
- 【uva 247】Calling Circles(图论--Floyd 传递闭包+并查集 连通分量)
题意:有N个人互相打了M次电话,请找出所有电话圈(Eg.a→b,b→c,c→d,d→a 就算一个电话圈)并输出.(N≤25,L≤25,注意输出格式) 解法:由于N比较小所有n^2或n^3的复杂度都没有 ...