我已经创建了一个动态加载内容的网页，使用React.js。我通过REST api调用获取一个对象数组，然后将它们输入到表格中。我的问题是，数组.map内的onClick赋值没有触发指定的函数。
我认为这是一个[this]上下文问题，但我不知道如何解决。数组.map中的[this]与外部的[this]不同，这可以通过console.log证明。
我创建了两个独立的html文件进行演示。第一个包含一个静态创建的对象，正确地调用了onClick函数：
我认为这是一个[this]上下文问题，但我不知道如何解决。数组.map中的[this]与外部的[this]不同，这可以通过console.log证明。
我创建了两个独立的html文件进行演示。第一个包含一个静态创建的对象，正确地调用了onClick函数：
https://jsfiddle.net/m1vugyd9/
第二个尝试从对象数组中动态加载，但无法正常工作：https://jsfiddle.net/avmbdxte/
我不知道这些链接的有效期是多久，所以如果它们失效了，我也会在下面包含实际的HTML代码。两者之间的差异在注释中有所突出。
静态 - 可用：
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<style>
table {
text-align: center;
}
</style>
</head>
<body>
<div id="reactDiv"></div>
<script src="https://fb.me/react-0.14.3.min.js"></script>
<script src="https://fb.me/JSXTransformer-0.13.3.js"></script>
<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
<script type="text/jsx">
var FMap = React.createClass({
render: function() {
return (
<tr>
<td>{this.props.sTable}</td>
<td>{this.props.sField}</td>
<td>{this.props.dTable}</td>
<td>{this.props.dField}</td>
<td><a href="#" onClick={this.props.mapCountClick}>{this.props.mapCount}</a></td>
</tr>
);
}
});
var Main = React.createClass({
getInitialState: function () {
return { mapData: [] };
},
editMaps: function() {
alert("Clicked on map editor");
},
render: function () {
var maps = [
{
mapID: 1,
sourceT: "sT1",
sourceF: "sF1",
destT: "dT1",
destF: "dF1",
mapCount: 6
},
{
mapID: 2,
sourceT: "sT1",
sourceF: "sF2",
destT: "dT1",
destF: "dF2",
mapCount: 2
}
];
/////////////////////////////////////////////////////
// this is the static part that's different from the dynamic part
var fMaps =
<FMap key="1"
sTable="sT1"
sField="sF1"
dTable="dT1"
dField="dF1"
mapCount="6"
mapCountClick={this.editMaps} />;
// end of difference
/////////////////////////////////////////////////////
return (
<table width="100%">
<thead>
<tr>
<th>SourceT</th>
<th>SourceF</th>
<th>DestT</th>
<th>DestF</th>
<th>MapCount</th>
</tr>
</thead>
<tbody>
{fMaps}
</tbody>
</table>
);
}
});
React.render(<Main />, document.getElementById("reactDiv"));
</script>
</body>
</html>
动态-不起作用：
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<style>
table {
text-align: center;
}
</style>
</head>
<body>
<div id="reactDiv"></div>
<script src="https://fb.me/react-0.14.3.min.js"></script>
<script src="https://fb.me/JSXTransformer-0.13.3.js"></script>
<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
<script type="text/jsx">
var FMap = React.createClass({
render: function() {
return (
<tr>
<td>{this.props.sTable}</td>
<td>{this.props.sField}</td>
<td>{this.props.dTable}</td>
<td>{this.props.dField}</td>
<td><a href="#" onClick={this.props.mapCountClick}>{this.props.mapCount}</a></td>
</tr>
);
}
});
var Main = React.createClass({
getInitialState: function () {
return { mapData: [] };
},
editMaps: function() {
alert("Clicked on map editor");
},
render: function () {
var maps = [
{
mapID: 1,
sourceT: "sT1",
sourceF: "sF1",
destT: "dT1",
destF: "dF1",
mapCount: 6
},
{
mapID: 2,
sourceT: "sT1",
sourceF: "sF2",
destT: "dT1",
destF: "dF2",
mapCount: 2
}
];
/////////////////////////////////////////////////////
// this is the part that doesn't work
var fMaps = maps.map(function (map) {
var component = this;
return (
<FMap key={map.mapID}
sTable={map.sourceT}
sField={map.sourceF}
dTable={map.destT}
dField={map.destF}
mapCount={map.mapCount}
mapCountClick={this.editMaps} />
);
});
// end
/////////////////////////////////////////////////////
return (
<table width="100%">
<thead>
<tr>
<th>SourceT</th>
<th>SourceF</th>
<th>DestT</th>
<th>DestF</th>
<th>MapCount</th>
</tr>
</thead>
<tbody>
{fMaps}
</tbody>
</table>
);
}
});
React.render(<Main />, document.getElementById("reactDiv"));
</script>
</body>
</html>
工作示例（感谢pvg！）：
https://jsfiddle.net/qLp9uuq3/
另一个工作示例（感谢Matthew Herbst！）：