Question

您好，第一个问题和初学者React用户在这里。我按照这个（React - Triggering click event on table row）示例在React表上发生了onClick事件，但是第一个问题是我在Visual Studio Code中收到一条警告，提示未定义ReferenceError：e未定义。任何帮助将不胜感激。

这是我的代码：

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;

Answer 1

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

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

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

希望能解决您的问题

Answer 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;

Answer 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的更多信息。

Answer 4

由于这是单击事件，因此会将事件对象作为参数传递给处理程序。只需将e（您可以将其命名为任何东西...只是一个约定）定义为要在函数中使用的参数，以便可以访问其上的属性（如target）。

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

希望这会有所帮助！

React表行上的OnClick事件

4 个答案: