react+antd,table组件如何使用函数

发布于 2022-09-11 23:24:24 字数 1900 浏览 16 评论 0

用的ui框架为antd,使用的组件为table,用了typescript和react-redux

请问如何在mapStateToProps中使用mapDispatchToProps里的函数
如下图
因为需要用columns中的数据渲染table组件,所以数据放在mapStateToProps中,在Cart组件里通过this.props来使用。

问题1.png

import { stateType } from "./store/index"
import Bread from './component/bread'
import { Table, Button } from 'antd';


interface Iprops {
    data: aGoods_list[],
    columns: object[]
}

class Cart extends Component<Iprops> {
    render() {
        const { data, columns} = this.props
        return (
            <div>
                {/* 导航 */}
                <Bread title="购物车" />

                {/* 购物车 */}
                {
                    data.length === 0
                        ?
                        <div>购物车里什么也没有哦</div>
                        :
                            <Table 
                            columns={columns} 
                            dataSource={data} 
                            rowKey={(item, index) => String(index)}
                            pagination={false}
                            bordered={true}
                             />
               
                }

            </div>

        )
    }
}

const mapStateToProps = (state: stateType) => {

    return {
        data: state.listReducer,
        columns: [
            {
                title: '操作',
                dataIndex: 'id',
                align: 'center' ,
                render: (id: number) => <Button type="danger" onClick={() => { }}>删除</Button>
            }
        ]
    }
}

const mapDispatchToProps = (dispatch: Dispatch) => {
    return {
        fnDelete(){
            console.log("呵呵呵");
            
        }
    }
}


export default connect(mapStateToProps, mapDispatchToProps)(Cart);

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(1

在风中等你 2022-09-18 23:24:24

在props里面可以获取这个函数:

const { fnDelete } = this.props

然后就可以调用了

~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文