React Hooks & react forwardRef hooks & useReducer
2024-10-06 09:56:40
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 发布文章使用：只允许注册用户才可以访问！
最新文章
- ECharts 初识（基于MVC+jQuery+Angularjs实现的Demo）
- iOS -Swift 3.0 -for(循环语句用法)
- 30+有用的CSS代码片段
- pm2使用
- Oracle 11g系列：数据表对象
- 操作系统开发系列—12.e.Makefile
- ReactNative环境配置
- Win10 UAP 绑定
- 关于vim插件
- MJRefresh插件引起的错误
- 玩转Android之加速度传感器的使用，模仿微信摇一摇
- SPOJ 1435 - Vertex Cover（树形DP，树的最小点覆盖）
- jdk和cglib简单理解（转）
- 深度理解Node.js单线程模型
- HDU 1754 I Hate It(线段树之单点更新，区间最值)
- c++ singleton单例模式
- go语言学习-常用命令（四）
- java.lang.ClassNotFoundException: javax.servlet.SessionCookieConfig
- 1171: lfx捧杯稳啦！
- Java——word分词·自定义词库