Question

我有一个只有标记的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;

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;

我的挑战是让每个表格行都可点击，我可以在点击该行时获得更多信息。但是这样写，不执行函数handleClick，从我所读的内容也不是最好的方法，因为它会为每一行创建一个新函数。所以我的问题是如何创建onClick处理程序，以便知道我点击了哪一行？或者我还能做些什么才能让它发挥作用？另外，如果你能指出我对这个话题的好读，真的很感激。谢谢！

Answer 1

由于您已经使用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;

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;

Answer 2

似乎它与我正在使用的Material UI Table组件中的错误有关。更多信息：https://github.com/callemall/material-ui/issues/1783。所以我最终为每一行创建了按钮，现在一切正常。

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

2 个答案: