关于antd tree和父子组件之间的传值问题(react 总结)
项目需求:点击产品树节点时获取该节点的所有父节点,同时回填表格的搜索条件,完成搜索功能,搜索结果展示在下方的table中。
写了三个组件:
现在有个业务场景交互:在orderTree组件中点击树节点,获取当前节点以及所有的父节点的Id 放入一个对象arrKeys中,并在orderForm组件中使用(回填类型下拉选择框,objId对象作为查询接口的入参)
现在可以分部解决问题:
1.首先获取点击的树节点以及所有父节点的id ---arrKeys
2.在点击树节点获取当前节点以及所有父级节点之后,通过this.props.idObject(arrKeys)把 arrKeys传给父组件。
3.在tree组件和form组件中的componentDidMount生命周期中把整个组件传给父组件
4.form组件中的inquery方法:
现附上tree.js代码
import React, { Component } from 'react'; import { connect } from 'dva'; import { Divider, Modal, Table, message, Tag, Spin } from 'antd'; import router from 'umi/router'; import style from '../style.less'; import { Tree, Input } from 'antd'; const { confirm } = Modal; const { TreeNode } = Tree; const { Search } = Input; let dataList = []; let keysObj = {}; // 当前节点以及所有父节点的id let firstParentKey = {}; // 一级根节点的id const intetorFun = (data, key, string) => { if (string) { firstParentKey = { [data.param]: data.paramId, }; } if (data.children && data.children.length !== 0) { data.children.forEach(item => { if (item.id === key[0]) { keysObj = { [data.param]: data.paramId, [item.param]: item.paramId, ...firstParentKey, }; } else { intetorFun(item, key); } }); } return keysObj; }; const getParentKey = (key, tree) => { let parentKey = []; for (let i = 0; i < tree.length; i++) { const node = tree[i]; parentKey = intetorFun(node, key, 'firstTime'); } return parentKey; }; //搜索用的 const getSearchKey = (key, tree) => { let parentKey; for (let i = 0; i < tree.length; i++) { const node = tree[i]; if (node.children) { if (node.children.some(item => item.id === key)) { parentKey = node.id; } else if (getSearchKey(key, node.children)) { parentKey = getSearchKey(key, node.children); } } else { if (node.id === key) { parentKey = node.id; } } } return parentKey; }; @connect(({ commodity, loading, menu }) => ({ commodity, loading: loading.effects['commodity/getTree'], menu, })) class OrderTree extends Component { constructor(props) { super(props); this.state = { expandedKeys: [], //默认展开一级根节点 props.commodity.defaultParentIdList searchValue: '', autoExpandParent: true, }; } componentDidMount() { const { dispatch } = this.props; this.props.treeRef && this.props.treeRef(this); //挂载时把整个tree组件传给父组件 dispatch({ type: 'commodity/getTree', callback: res => { this.generateList(res.data); const defaultParentIdList = res.data.map(item => item.id); this.setState({ expandedKeys: defaultParentIdList, }); }, }); } generateList = data => { const { dispatch } = this.props; for (let i = 0; i < data.length; i++) { const node = data[i]; const { id, name } = node; dataList.push({ id, name }); dispatch({ type: 'commodity/save', payload: { dataList, }, }); if (node.children) { this.generateList(node.children); } } }; //展开/收起节点时触发 onExpand = expandedKeys => { this.setState({ expandedKeys, autoExpandParent: true, }); }; //点击树节点时触发 onSelect = (selectKeys, e) => { const { dispatch } = this.props; const { commodity: { treeData }, } = this.props; let arrKeys = {}; //只有节点选中了才执行代码 dataRef是自定义在TreeNode上添加的属性,可以获取当前节点的所有信息 if (e.selected && e.node.props.dataRef.param !== 'categoryId') { keysObj = {}; firstParentKey = {}; arrKeys = getParentKey(selectKeys, treeData); } else if (e.selected && e.node.props.dataRef.param === 'categoryId') { keysObj = {}; firstParentKey = {}; arrKeys = { categoryId: e.node.props.dataRef.paramId, }; } else if (!e.selected) { return false; } this.props.idObject(arrKeys); }; // 搜索功能 onChange = e => { const { value } = e.target; const { commodity: { treeData, dataList, defaultParentIdList }, } = this.props; let expandedKeys = []; if (value) { expandedKeys = dataList .map(item => { if (item.name.toLowerCase().indexOf(value.toLowerCase()) > -1) { //不区分大小写 return getSearchKey(item.id, treeData); } return null; }) .filter((item, i, self) => item && self.indexOf(item) === i); this.setState({ expandedKeys, searchValue: value, autoExpandParent: true, }); } else { this.setState({ expandedKeys: defaultParentIdList, searchValue: '', autoExpandParent: true, }); } }; render() { const { searchValue, expandedKeys, autoExpandParent } = this.state; const { commodity: { treeData }, loading, } = this.props; const loop = data => data.map(item => { const index = item.name.toLowerCase().indexOf(searchValue.toLowerCase()); //忽略大小写 const beforeStr = item.name.substr(0, index); const afterStr = item.name.substr(index + searchValue.length); const centerStr = item.name.substr(index, searchValue.length); const title = index > -1 ? ( <span title={item.name}> {beforeStr} <span style={{ color: '#f50' }}>{centerStr}</span> {afterStr} </span> ) : ( <span title={item.name}>{item.name}</span> ); if (item.children) { return ( <TreeNode key={item.id} title={title} dataRef={item}> {loop(item.children)} </TreeNode> ); } return <TreeNode key={item.id} title={title} dataRef={item} />; }); return ( <Spin spinning={loading}> <div> <Search style={{ marginBottom: 8 }} placeholder="Search" onChange={this.onChange} /> <Tree onExpand={this.onExpand} onSelect={this.onSelect} expandedKeys={expandedKeys} autoExpandParent={autoExpandParent} > {loop(treeData)} </Tree> </div> </Spin> ); } } export default OrderTree;
父组件index.js代码:
import React, { Component } from 'react'; import { connect } from 'dva'; import { formatMessage, FormattedMessage } from 'umi/locale'; import { Card, Spin } from 'antd'; import PageHeaderWrapper from '@/components/PageHeaderWrapper'; import OrderForm from './components/form'; import OrderTable from './components/table'; import OrderTree from './components/tree'; import style from './style.less'; import { consoleTestResultHandler } from 'tslint/lib/test'; // let dataList = []; @connect(({ commodity, loading, menu }) => ({ commodity, loading: loading.effects['commodity/getTree'], menu, })) class OrderPage extends Component { constructor() { super(); this.state = { idObject: {}, reactFlag: false, }; } componentDidMount() { const { dispatch } = this.props; dispatch({ type: 'commodity/getGoodsCategory', }); } onRef = ref => { this.orderForm = ref; }; treeRef = ref => { this.orderTree = ref; }; getIdObject = data => { this.setState( { idObject: data, }, () => { this.orderForm.props.form.setFieldsValue({ categoryIds: [String(data.categoryId)], }); this.orderForm.inquery(data); } ); }; //判断是否点击重置按钮 isReact = ref => { const { commodity: { defaultParentIdList }, } = this.props; if (ref) { this.orderTree.setState({ expandedKeys: defaultParentIdList, }); } }; render() { return ( <PageHeaderWrapper logo> <Card bordered={false} title="商品SPU列表" className={style.antCardBox}> <div style={{ width: '350px', marginRight: '30px', boxShadow: '3px -3px 6px 0px #ccc6' }} className={style.antTreeBox} > <OrderTree idObject={this.getIdObject} treeRef={this.treeRef} /> </div> <div style={{ flex: '1' }}> <OrderForm onRef={this.onRef} isReact={this.isReact} /> <OrderTable /> </div> </Card> </PageHeaderWrapper> ); } } export default OrderPage;
以上就是关于antd tree 和父子组件之间的传值问题(react 总结)的详细内容,更多关于antd tree 父子组件传值的资料请关注猪先飞其它相关文章!
相关文章
关于React Native报Cannot initialize a parameter of type'NSArray<id<RCTBridgeModule>>错误(解决方案)
这篇文章主要介绍了关于React Native报Cannot initialize a parameter of type'NSArray<id<RCTBridgeModule>>错误,本文给大家分享解决方案,需要的朋友可以参考下...2021-05-12- 这篇文章主要介绍了解决Antd Table表头加Icon和气泡提示的坑,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧...2020-11-17
antd Form组件方法getFieldsValue获取自定义组件的值操作
这篇文章主要介绍了antd Form组件方法getFieldsValue获取自定义组件的值操作,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧...2020-10-29React引入antd-mobile+postcss搭建移动端
本文给大家分享React引入antd-mobile+postcss搭建移动端的详细流程,文末给大家分享我的一些经验记录使用antd-mobile时发现我之前配置的postcss失效了,防止大家踩坑,特此把解决方案分享到脚本之家平台,需要的朋友参考下吧...2021-06-21- 这篇文章主要介绍了React使用高德地图的实现示例(react-amap),文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧...2021-04-18
使用 React 和 Threejs 创建一个VR全景项目的过程详解
这篇文章主要介绍了使用 React 和 Threejs 创建一个VR全景项目的过程详解,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下...2021-04-06- 思路其实没有那么复杂,把地图想成一个盒子容器,地图中心点想成盒子中心点;扎点在【地图中心点】不会动,当移动地图时,去获取【地图中心点】经纬度,设置某个位置的时候,将经纬度设置为【地图中心点】即可...2021-06-20
- 这篇文章主要为大家详细介绍了React列表栏及购物车组件使用,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下...2021-06-28
- 这篇文章主要介绍了react使用antd表单赋值,用于修改弹框的操作,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧...2020-10-29
- 这篇文章主要介绍了React Native 启动流程简析,文以 react-native-cli 创建的示例工程(安卓部分)为例,给大家分析 React Native 的启动流程,需要的朋友可以参考下...2021-08-18
- 这篇文章主要介绍了一百多行代码实现react拖拽hooks,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧...2021-03-21
- 这篇文章主要介绍了解决antd Form 表单校验方法无响应的问题,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧...2020-10-28
- useState 通过在函数组件里调用它来给组件添加一些内部 state,React 会在重复渲染时保留这个 state,接下来通过一个示例来看看怎么使用 useState吧...2021-06-04
- 高阶组件就是接受一个组件作为参数并返回一个新组件(功能增强的组件)的函数。这里需要注意高阶组件是一个函数,并不是组件,这一点一定要注意,本文给大家分享React 高阶组件HOC使用小结,一起看看吧...2021-06-13
- 这篇文章主要介绍了React中使用setInterval函数的实例,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下...2021-04-06
- 本文主要介绍了react为什么不推荐使用index作为key,文中通过示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下...2021-07-22
关于antd tree和父子组件之间的传值问题(react 总结)
这篇文章主要介绍了关于antd tree 和父子组件之间的传值问题,是小编给大家总结的一些react知识点,本文通过一个项目需求实例代码详解给大家介绍的非常详细,需要的朋友可以参考下...2021-06-02- 这篇文章主要介绍了react自动化构建路由的实现,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧...2021-04-23
- 这篇文章主要介绍了React Class组件生命周期,包括react组件的两种定义方式和class组件不同阶段生命周期函数执行顺序,本文给大家介绍的非常详细,需要的朋友可以参考下...2021-08-14
- 这篇文章主要介绍了react+ts实现简单jira项目,本文通过图文实例相结合给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下...2021-07-30