react 父组件传递函数给子组件

最新推荐文章于 2024-08-18 13:53:12 发布

胖鹅68

最新推荐文章于 2024-08-18 13:53:12 发布

阅读量1w

点赞数

分类专栏： react、antDesigin、dva、mobx

本文链接：https://blog.csdn.net/hbiao68/article/details/83580885

版权

react、antDesigin、dva、mobx 专栏收录该内容

71 篇文章 3 订阅

订阅专栏

文章目录

文章参考

问题来源

学习react过程中向把Lits列表中的Item项抽象成一个组件，子组件内部有个SwipeAction组件，它需要接受一个对象，对象中包含一个自定义函数，不是直接通过props传递的函数；这就有点晕了，不知道jsx能否找到函数的所属对象，特此做了相关记录

案例

父组件

// 通过高阶函数返回定义的事件，高阶函数获取变量参数，在返回函数中获取事件对象
deleteGoodsByIdByPost(goodsId, index){
    let that = this;
    that.state.goodsList.splice(index, 1);
    that.setState({
        goodsList : that.state.goodsList
    })
    GoodsService.deleteGoodsByIdByPost(goodsId)
        .then(function(res){
        if(res.data == "sucess"){
            Toast.success('删除成功 !!!', 1);
        }
    });
}

render () {
	    // 顶部右侧按钮，实现页面切换
	    let typeInBtn = <Link to={ "/goodsManage/goodsDetailsAdd" }>录入</Link>;
		return (
            <div>
                <div className={'contentStyle'}>
                    {this.state.goodsList.map((currentObj, index, originArr) => {
                        let rightSwipeConfigArray = [{
                            text: '删除',
                            onPress: this.deleteGoodsByIdByPost.bind(this,currentObj.goodsId, index),
                            style: { backgroundColor: '#F4333C', color: 'white' },
                        }];
                        let url = "/goodsManage/goodsDetailsUpdate/"+currentObj.goodsId;
                        return (
                            <GoodsListItemComp key={index} url={url} goodsObj={currentObj} rightSwipeConfigArray={rightSwipeConfigArray}></GoodsListItemComp>
                        );
                    })}
                </div>
            </div>
		);
	}

子组件GoodsListItemComp

import BaseComponent from '../core/BaseComponent.js';
import { SwipeAction, Button, Toast } from 'antd-mobile';
import { Link } from 'react-router-dom';

/**
 * 商品列表的 Item 项组件
 */
class GoodsListItemComp extends BaseComponent {

    // GoodsDetails的构造函数，可以执行初始化的操作
    constructor (props) {
        super(props);
        let that = this;
        this.imageStyle = {
            width: "90px",
            height: "auto",
            float: "left"
        };
        let  propsRightSwipeConfigArray = null;
        if(props.rightSwipeConfigArray == undefined){
            propsRightSwipeConfigArray = [];
        }else{
            propsRightSwipeConfigArray = props.rightSwipeConfigArray;
        }
        this.state = {
            // 商品对象
            goodsObj: props.goodsObj,
            url: props.url,
            rightSwipeConfigArray : propsRightSwipeConfigArray
        };
    }

	render () {
        let {goodsObj, rightSwipeConfigArray, url} = this.state;
		return (
            <SwipeAction style={{ backgroundColor: 'gray' }}
                         autoClose
                         right={rightSwipeConfigArray}
            >
                 <Link to={ url }>
                     <div style={{"background": "#fff"}} >
                         <img src='src/assets/yay.jpg' style={this.imageStyle}/>
                         <div style={{"marginLeft": "100px"}}>
                             <div style={{"fontSize":"16px","lineHeight":"1.8"}}>{goodsObj.goodsName}-{goodsObj.goodsId}</div>
                             <div style={{"lineHeight":"1.8"}}>售价：{goodsObj.salePrice} 元</div>
                             <div style={{"clear": "both"}}></div>
                         </div>
                     </div>
                 </Link>
            </SwipeAction>
		);
	}
}
export default GoodsListItemComp;