Javascript 无法在React组件中执行传递的函数

我有一个只带标记的React组件ResultsTable，所有数据提取都在其容器ResultsTableContainer中完成，并在渲染时传递

ResultsTable.jsx

const ResultsTable = ({ games, results }) => (
<Table>
<TableHeader>
  <TableRow>
    <TableHeaderColumn>Date</TableHeaderColumn>
    <TableHeaderColumn>City</TableHeaderColumn>
    <TableHeaderColumn>Venue</TableHeaderColumn>
    <TableHeaderColumn>Host</TableHeaderColumn>
  </TableRow>
</TableHeader>
<TableBody>
  {games.map((game, index) => (
    <TableRow key={index} onClick={(index) => results}>
      <TableRowColumn>
        {moment(game.gameDate).format("YYYY-MM-DD")}
      </TableRowColumn>
      <TableRowColumn>{game.city}</TableRowColumn>
      <TableRowColumn>{game.venueName}</TableRowColumn>
      <TableRowColumn>{game.hostName}</TableRowColumn>
    </TableRow>
  ))}
</TableBody>
</Table>
);

export default ResultsTable;

constresultstable=（{games，results}）=>(
日期
城市
地点
主办
{games.map（（游戏，索引）=>(
结果}>
{矩（game.gameDate）.format（“YYYY-MM-DD”）}
{游戏。城市}
{game.venueName}
{game.hostName}
))}
);
导出默认结果表；

ResultsTableContainer.jsx

class ResultsTableContainer extends Component {
constructor(props) {
super(props);

this.state = {
  games: []
};
}

componentDidMount = () => {
 axios
  .get("public_api/games")
  .then(resp => {
    this.setState({
      games: resp.data
    });
  })
  .catch(console.error);
 };

handleClick = (i) => {
console.log('clicked' + i)
};

render() {
return (
  <ResultsTable
    games={this.state.games}
    results={this.handleClick.bind(this)}
  />
   );
 }
}

export default ResultsTableContainer;

类ResultsTableContainer扩展组件{
建造师（道具）{
超级（道具）；
此.state={
游戏：[]
};
}
componentDidMount=（）=>{
axios
.get（“公共_api/游戏”）
。然后（resp=>{
这是我的国家({
游戏：resp.data
});
})
.catch（控制台错误）；
};
handleClick=（i）=>{
console.log（'clicked'+i）
};
render（）{
返回(
);
}
}
导出默认的ResultsTableContainer；

---

我的挑战是使每个表行都可以单击，这样我在单击该行时可以获得更多信息。然而，以这种方式编写不会执行函数handleClick，根据我所读的内容，这也不是最好的方法，因为它会为每一行创建一个新函数。所以我的问题是如何创建onClick处理程序，以便知道我单击了哪一行？或者我还能做些什么来让它工作？另外，如果你能给我指出一本关于这个话题的好读物，我将不胜感激。谢谢大家!

由于您已经在为

handleClick

使用箭头函数，因此无需再次手动绑定该函数。您可以将其用作

this.handleClick

要获取所单击行的索引/id，可以尝试以下操作：

const ResultsTable = ({ games, onRowClick }) => (
<Table>
<TableHeader>
  <TableRow>
    <TableHeaderColumn>Date</TableHeaderColumn>
    <TableHeaderColumn>City</TableHeaderColumn>
    <TableHeaderColumn>Venue</TableHeaderColumn>
    <TableHeaderColumn>Host</TableHeaderColumn>
  </TableRow>
</TableHeader>
<TableBody>
  {games.map((game, index) => (
    <TableRow key={index} id={index} onClick={onRowClick}>
      <TableRowColumn>
        {moment(game.gameDate).format("YYYY-MM-DD")}
      </TableRowColumn>
      <TableRowColumn>{game.city}</TableRowColumn>
      <TableRowColumn>{game.venueName}</TableRowColumn>
      <TableRowColumn>{game.hostName}</TableRowColumn>
    </TableRow>
  ))}
</TableBody>
</Table>
);

export default ResultsTable;

constresultstable=（{games，onRowClick}）=>(
日期
城市
地点
主办
{games.map（（游戏，索引）=>(
{矩（game.gameDate）.format（“YYYY-MM-DD”）}
{游戏。城市}
{game.venueName}
{game.hostName}
))}
);
导出默认结果表；

---

类ResultsTableContainer扩展组件{
建造师（道具）{
超级（道具）；
此.state={
游戏：[]
};
}
componentDidMount=（）=>{
axios
.get（“公共_api/游戏”）
。然后（resp=>{
这是我的国家({
游戏：resp.data
});
})
.catch（控制台错误）；
};
handleClick=（事件）=>{
//将传递行的onClick中的事件对象
//您可以从事件目标的id属性获取行的索引
//您也可以使用某种类型的唯一id，而不是索引
log（`clicked on row${event.target.id}`）；
};
render（）{
返回(
);
}
}
导出默认的ResultsTableContainer；

这似乎与我正在使用的Material UI Table组件中的一个bug有关。更多信息：。

---

所以我最终为每一行创建了一个按钮，现在一切都正常了。

如果你的函数是箭头函数，你不必绑定（这个）^ ^不幸的是，这不起作用。即使是普通字符串也不能使用console.log。是否将'id={index}'部分添加到表行？是的，我添加了所有建议的修改，也添加了id。

class ResultsTableContainer extends Component {
constructor(props) {
super(props);

this.state = {
  games: []
};
}

componentDidMount = () => {
 axios
  .get("public_api/games")
  .then(resp => {
    this.setState({
      games: resp.data
    });
  })
  .catch(console.error);
 };

handleClick = (event) => {
  // event object from the onClick of the row will be passed
  // you can get the index of the row from the event target's id prop
  // rather than index, you can use an unique id of some sort too
  console.log(`clicked on row ${event.target.id}`);
};

render() {
return (
  <ResultsTable
    games={this.state.games}
    onRowClick={this.handleClick}
  />
   );
 }
}

export default ResultsTableContainer;