React 表行上的 OnClick 事件答案

【问题标题】：OnClick event on React table rowReact 表行上的 OnClick 事件
【发布时间】：2019-03-01 17:12:57
【问题描述】：

您好，这里是第一个问题和初学者 React 用户。我按照这个 (React - Triggering click event on table row) 示例在 React 表上设置了 onClick 事件，但第一个问题是我在 Visual Studio Code 中收到了 Uncaught ReferenceError: e is not defined 的警告。任何帮助将不胜感激。

这是我的代码：

import React from 'react';
import './gridStyle.css';

class Grid extends React.Component {

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

    renderResultRows(data) {
        return data.map((coord, 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.
            (
                // eslint-disable-next-line react/no-array-index-key
                <tr key={index} data-item={coord} onClick={this.onClickHandler}>
                    <td data-title="cc">{coord.lat},{coord.lon}</td>
                    <td data-title="ic" />
                    <td data-title="dlat" />
                    <td data-title="dlon" />
                </tr>
            )); // no need to bind with anon function
    }

    render() {
        console.log('Coords passed in from Accuracy Calculator :', this.props.coords);
       return (
            <div className="grid">
                <table id="table0">
                    {this.renderResultRows(this.props.coords)}
                </table>
            </div>
        );
    }
}

export default Grid;

【问题讨论】：

标签： javascript reactjs

【解决方案1】：

你需要把 e 放在你的函数中

在你的onClickHandler中，在参数中添加e。

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

希望能解决你的问题

【讨论】：

【解决方案2】：

您没有将 onClickHandler 参数作为 e 传递，参考下面的代码。


import React from 'react';
import './gridStyle.css';

class Grid extends React.Component {

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

    renderResultRows(data) {
        return data.map((coord, 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.
            (
                // eslint-disable-next-line react/no-array-index-key
                <tr key={index} data-item={coord} onClick={this.onClickHandler}>
                    <td data-title="cc">{coord.lat},{coord.lon}</td>
                    <td data-title="ic" />
                    <td data-title="dlat" />
                    <td data-title="dlon" />
                </tr>
            )); // no need to bind with anon function
    }

    render() {
        console.log('Coords passed in from Accuracy Calculator :', this.props.coords);
       return (
            <div className="grid">
                <table id="table0">
                    {this.renderResultRows(this.props.coords)}
                </table>
            </div>
        );
    }
}

export default Grid;

【讨论】：

【解决方案3】：

你需要改变...

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

到

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

为了防止您遇到的错误。您可以阅读有关事件对象here 的更多信息。

【讨论】：

【解决方案4】：

因为它是一个点击事件，所以一个事件对象作为参数传递给处理程序。只需将e（您可以将其命名为任何名称...e 只是一个约定）定义为要在函数中使用的参数，以便您可以访问其上的属性（如目标）。

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

希望这会有所帮助！

【讨论】：