Javascript 为什么handleClick事件不是从子元素激发的？

我试图将

onClick

事件传递给子组件，但没有触发任何操作。我试图做的是传递

数据id

和每个输入的值，以更新每个子组件的值。但我不能让它工作

这是小提琴。当我点击按钮时，没有任何东西被触发

/**@jsx React.DOM*/
var Assets=React.createClass({
getInitialState:函数（）{
返回{data:[{name:'初始化…}]}；
},
componentDidMount:function（）{
if（this.isMounted（））{
此.setState（{数据：[
{
“嵌入代码”：“嵌入代码1”，
“名称”：“cat1”
},
{
“嵌入代码”：“嵌入代码2”，
“名称”：“cat2”
}
]});
}
},
handleClick:函数（事件）{
console.log（'asdf'）；
},
render:function（）{
返回(
{this.state.data.map（函数（结果，索引）{
返回(
);
})}
);
}
});
var Asset=React.createClass({
render:function（）{
返回(
{this.props.data.name}
类别
)
}
});
React.renderComponent(
，document.body
);

---

不确定我是否遗漏了一些明显的内容。

在

.map

回调中，

此

指的是全局对象，而不是

资产

实例

this.handleClick

尝试访问全局变量

handleClick

，该变量可能不存在。因此，您正在将

未定义的

传递给

onButtonClicked

，这与根本不传递道具相同

您可以将第二个参数传递给

.map

，该参数将成为回调中的

this

的值：

{this.state.data.map(function(result, index) {
    return (
        <Asset data={result} onButtonClicked={this.handleClick}/>
    );
}, this)} // <- pass instance as second argument

{this.state.data.map（函数（结果，索引）{
返回(
.
非常感谢，我错过了！
{this.state.data.map(function(result, index) {
    return (
        <Asset data={result} onButtonClicked={this.handleClick}/>
    );
}, this)} // <- pass instance as second argument