Javascript 在react中的循环中附加事件侦听器

这是我的密码

import React,{ Component } from 'react';
import PTSearch from 'post-api-search';

export default class Navbar extends Component{
constructor(props) {
    super(props);

    this.state = {
        source: []
    };

    this.sourceSearch();
}

sourceSearch() {
    PTSearch({ 
        category: "",
        language: "en",
        country: ''
    }, "sources", (sources) => {
        this.setState({ 
            source: sources
        });
    });
}

loadSourceContent() {
    alert(1);
}

renderSource(data){
    return (
        <li title={data.description} onClick={this.loadSourceContent} key={data.name}>{data.name}</li>
    );
}

render(){
    return (
        <div>
            <button id="menu-toggle" className="menu-toggle"><span>Menu</span></button>
            <div id="theSidebar" className="sidebar">
                <button className="close-button fa fa-fw fa-close"></button>
                <div>
                    <img src="https://vignette.wikia.nocookie.net/clonewarsadventurescharacter/images/8/81/Superman-logo-transparent.png/revision/latest?cb=20131006162105" />
                </div>
                <ul className="source-list">
                    { this.state.source.slice(0, 10).map(this.renderSource) }
                </ul>
            </div>
        </div>
    );
};

import React，{Component}来自'React'；
从“api后搜索”导入PTSearch；
导出默认类导航栏扩展组件{
建造师（道具）{
超级（道具）；
此.state={
资料来源：[]
};
这个.sourceSearch（）；
}
sourceSearch（）{
PTSearch（{
类别：“，
语言：“恩”，
国家：''
}，“来源”，（来源）=>{
这个.setState（{
资料来源：资料来源
});
});
}
loadSourceContent（）{
警报（1）；
}
渲染源（数据）{
返回(
{data.name}
);
}
render（）{
返回(
菜单

{this.state.source.slice（0,10.map）（this.renderSource）}

);
};

}

我想在li的每个元素中添加一个onclick事件，但这段代码不适合我。问题是，当我单击

元素时，它给出了

loadsourcecontent

未定义错误

---

提前感谢并对我的英语感到抱歉

您需要绑定

renderSource

，因为此上下文不属于该类

constructor(props) {
    super(props);

    this.state = {
        source: []
    };
    this.renderSource = this.renderSource.bind(this);
    this.sourceSearch();
}

---

或者使用es6 arrow，您需要绑定

renderSource

，因为该上下文不属于该类

constructor(props) {
    super(props);

    this.state = {
        source: []
    };
    this.renderSource = this.renderSource.bind(this);
    this.sourceSearch();
}

---

或者使用es6 arrow

@Sourav，我将这个

renderSource

调用拆分为另一个类，而不是将它放在这个类的函数中。例如，

{this.state.source.slice（0,10）.map（data=>）}

因为它是可重用的和更清晰的。@Sourav我将这个

renderSource

调用拆分为另一个类，而不是将它放在这个类的函数中。例如

{this.state.source.slice（0,10）.map（data=>）}

因为它是可重用的，而且更清晰。可能重复的