首先，您将评估的函数调用传递给您的onClick属性。

单独看下面的代码：

 function foo(name) { return 'hello ' + name; }

 foo('bob');

您希望 的输出为foo('bob')“hello bob”。

如果我将它传递给onClickprop，则完全相同。例如：

 <button onClick={foo('bob')}

在这种情况下，我只会将一个字符串传递给onClick按钮的props。的onClick（和其他事件的props）希望被提供的功能（或ref）。我将在下面举一个例子。

其次我看你有正确的意向试图维持使用的组合为你的函数正确的范围const self = this和bind。使用 ES6/2015 中的匿名函数有一种更简单的方法，它始终保持声明它们的范围。

然后我可以将您的代码更新为以下内容：

renderResultRows(data) {
    return data.map((song) => {  // anon func maintains scope!
        // Pass in a function to our onClick, and make it anon
        // to maintain scope.  The function body can be anything
        // which will be executed on click only.  Our song value
        // is maintained via a closure so it works.
        return (
            <tr onClick={() => this.fetchDetails(song)}>
                <td data-title="Song">{song.S_SONG}</td>
                <td data-title="Movie">{song.S_MOVIE}</td>
                <td data-title="Year">{song.S_YEAR}</td>
            </tr>
        );
    });  // no need to bind with anon function
}

但这仍然不是最佳的。当使用像这样的匿名语法（例如<foo onClick={() => { console.log('clicked') }）时，我们在每次渲染时创建一个新函数。如果您使用纯组件（即仅在提供新的 prop 实例时才应重新渲染的组件 - 此检查是通过浅比较执行的），这可能是一个问题。始终尝试尽早创建您的函数，例如在构造函数中或通过类属性（如果您使用 babel stage 1），这样您将始终传入相同的引用。

但是，对于您的示例，您需要将一个值“传递给”每个onClick处理程序。为此，您可以使用以下方法：

fetchSongDetails = () => {
  const song = e.target.getAttribute('data-item');
  console.log('We need to get the details for ', song);
}

renderResultRows(data) {
    return data.map((song, index) => {  // anon func maintains scope!
        // Pass in a function to our onClick, and make it anon
        // to maintain scope.  The function body can be anything
        // which will be executed on click only.  Our song value
        // is maintained via a closure so it works.
        return (
            <tr key={index} data-item={song} onClick={this.fetchSongDetails}>
                <td data-title="Song">{song.S_SONG}</td>
                <td data-title="Movie">{song.S_MOVIE}</td>
                <td data-title="Year">{song.S_YEAR}</td>
            </tr>
        );
    });  // no need to bind with anon function
}

这是一个更好的方法。另请注意，我key为正在生成的每一行添加了一个props。这是另一个react最佳实践，因为react将在其差异算法中使用唯一的密钥标识符。

我强烈推荐以下阅读：

• 范围和闭包： https : //github.com/getify/You-Dont-Know-JS/tree/master/scope%20%26%20closures
• react & ES6/2015 : http://egorsmirnov.me/2015/08/16/react-and-es6-part3.html
• react和动态孩子： https : //facebook.github.io/react/docs/multiple-components.html#dynamic-children

除了@ctrlplusb answer 之外，我还想建议另一种在 click 事件中传递对象的方法：

// 歌曲组件

import React from 'react';
import RowComponent from './RowComponent';

export default class SongData extends React.PureComponent {

  fetchDetails(songObj) {
    // whatever
  }

  renderResultRows(data) {
    return data.map(songObj => (
      <RowComponent
        key={songObj.id}
        data={songObj}
        onClick={this.fetchDetails}
      />;
  }

  render() {

    const { data } = this.props;

    return (
      <div>
        <table>
         <thead>
         </thead>
         <tbody>
          {
            this.renderResultRows(data)
          }
         </tbody>
        </table>
      </div>
    );
  }
}

// 行组件

import React from 'react';

export function RowComponent(props) {
  const { data, onClick } = props;

  function handleClick() {
    onClick(data);
  }

  return (
    <tr onClick={handleClick}>
      <td data-title="Song">{data.S_SONG}</td>
      <td data-title="Movie">{data.S_MOVIE}</td>
      <td data-title="Year">{data.S_YEAR}</td>
    </tr>
  );
}

使用变量绑定来避免在渲染时调用函数： self.fetchDetails.bind(song)