首页
学习
活动
专区
工具
TVP
发布
社区首页 >问答首页 >从ReactJS中的.map函数访问类方法

从ReactJS中的.map函数访问类方法
EN

Stack Overflow用户
提问于 2018-10-24 03:28:09
回答 1查看 283关注 0票数 0

我有以下ReactJS文件:

代码语言:javascript
复制
import React, { Component } from "react";
import Topic from "./Topic";
import $ from "jquery";

import { library } from '@fortawesome/fontawesome-svg-core'
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
import { faTrash, faEye } from '@fortawesome/free-solid-svg-icons'

library.add(faTrash, faEye);

class MainTopic extends Component {
    constructor() {
        super();
        this.state = { matter: [] };
    }
    componentDidMount(){
        $.ajax({
            url: "/api/all",
            dataType: "json",
            success: function (dados) {
                this.setState({matter:dados});
            }.bind(this)
        });
    }
    onDelete(dado){
        console.log(dado._id);
    }

    onEdit(dado){
        console.log(dado._id);
    };
    render() {
        const dados = this.state.matter;

        return (
            dados.map(function (dado) {
                let progressBarValues = {
                    width: dado.percentage_concluded
                };
                return (
                    <div key={dado._id} className="card mb-3">
                        <div className="card-header">
                            <span className="btn btn-light float-lg-right" onClick={() => this.onDelete(dado)}><FontAwesomeIcon icon="trash" /></span><span className="btn btn-light float-lg-right" onClick={(dado) => this.onEdit(dado)}><FontAwesomeIcon icon="eye" /></span>
                            <h4 className="card-title" ><a className="btn btn-dark" data-toggle="collapse" href={"#collapse-"+dado._id} role="button" aria-expanded="false" aria-controls={"collapse-"+dado._id}>{dado.title}</a></h4>
                            <div className="progress">
                                <div className="progress-bar" role="progressbar" style={progressBarValues} aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
                            </div>
                        </div>
                        <div className="card-body collapse" id={"collapse-"+dado._id}>
                            <Topic topic={dado.topics} />
                        </div>
                    </div>
                );
            })
        );
    }

}

export default MainTopic;

我所面临的错误是当我不得不点击删除和查看按钮时。它只会给我以下错误:TypeError: Cannot read property 'onDelete' of undefined

我试图将函数绑定到它,但它在呈现视图之前抛出了一个错误。

问题是如何访问.map函数中的方法。

提前谢谢你。

EN

回答 1

Stack Overflow用户

发布于 2018-10-24 03:32:22

在地图中使用箭头函数() => {},而不是法线函数。

票数 1
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/52956531

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档