我无法从 React 中的表格行调用点击事件。下面是我的代码。我有一个单独的函数来单独填充行，但似乎我弄乱了绑定(bind)信息。

import React, {Component, PropTypes} from 'react';
import Header from './Header';

export default class SongData extends Component {
 constructor(props, context) {
    super(props, context);
 }

isEmpty(obj) {
    return Object.keys(obj).length === 0;
}

fetchDetails(song) {
    console.log(song);
}

renderResultRows(data) {
    var self = this;
    return data.map(function(song) {
        return (
            <tr onClick={self.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>
        );
    }.bind(this));
}

render() {
    return (
        <div id="no-more-tables">
            <table className="table table-hover table-bordered table-striped">
                <thead>
                    <tr>
                        <th>Song</th>
                        <th>Movie</th>
                        <th>Year</th>
                    </tr>
                </thead>
                <tbody>
                    {!this.isEmpty(this.props.searchResult)
                        ? this.renderResultRows(this.props.searchResult)
                        : ''}
                </tbody>
            </table>
        </div>
    );
}

最佳答案

首先，您将一个已评估的函数调用传递给您的 onClick属性(property)。

单独看下面的代码:

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

 foo('bob');

您期望 foo('bob') 的输出成为“你好鲍勃”。

如果我把它传递给 onClick 是完全一样的支柱。例如:

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

在这种情况下，我只是将一个字符串传递给 onClick按钮的 Prop 。 onClick (和其他事件 Prop )期望提供一个功能(或引用)。我将在后面给出一个例子。

其次，我看到您有正确的意图尝试使用 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支持生成的每一行。这是另一个 React 最佳实践，因为 React 将在其差异算法中使用唯一的 key 标识符。

我强烈推荐以下阅读 Material :

• 范围和关闭: 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 & dynamic children: https://facebook.github.io/react/docs/multiple-components.html#dynamic-children

关于javascript - React - 在表格行上触发点击事件，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/37771316/