关于antd tree 和父子组件之间的传值问题(react 总结)
程序员文章站
2022-03-31 07:53:04
项目需求:点击产品树节点时获取该节点的所有父节点,同时回填表格的搜索条件,完成搜索功能,搜索结果展示在下方的table中。写了三个组件:现在有个业务场景交互:在ordertree组件中点击树节点,获取...
项目需求:点击产品树节点时获取该节点的所有父节点,同时回填表格的搜索条件,完成搜索功能,搜索结果展示在下方的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 父子组件传值的资料请关注其它相关文章!