时间戳

首页 > 解决方案 > 组件事件上未调用 React.js 函数

javascript - 组件事件上未调用 React.js 函数

问题描述

我是 React.js 的新手，也许这个问题有点含糊，请善待。我正在使用react-image-gallery在我的组件中创建一个画廊。这个画廊组件有一个回调函数的道具，onImageLoad当加载图像时调用它（我正在使用延迟加载）。问题是这个onImageLoad道具能够直接做，console.log('called')但它不会触发任何事件。所以这有效：

class Post extends React.Component {
  render() {
    return (
      <ImageGallery onImageLoad={console.log('called')} />
    )
  }
}

但这些不起作用：

class Post extends React.Component {
  EVENTNAME = e => {
    console.log('called', e);
  }
  render() {
    return (
      <ImageGallery onImageLoad={this.EVENTNAME.bind(this)} />
    )
  }
}

这也不起作用：

class Post extends React.Component {
  EVENTNAME = e => {
    console.log('called', e);
  }
  render() {
    return (
      <ImageGallery onImageLoad={e => this.EVENTNAME} />
    )
  }
}

也不是这个：

class Post extends React.Component {
  EVENTNAME = e => {
    console.log('called', e);
  }
  render() {
    return (
      <ImageGallery onImageLoad={e => console.log('called', e)} />
    )
  }
}

也试过这个：

class Post extends React.Component {
      EVENTNAME = e => {
        console.log('called', e);
      }
      render() {
        return (
          <ImageGallery onImageLoad={this.EVENTNAME} />
        )
      }
    }

我猜这是函数作用域的问题和类似的问题。一些提示和指导将不胜感激。谢谢！

在此处查看完整的文件代码

标签： javascriptreactjsfunctionscope

解决方案

您是否收到类似'EVENTNAME' is not defined no-undef 这样的错误，如果是这种情况，请在函数定义前添加声明。

 let EVENTNAME = e => {
          console.log('called', e);
        }

推荐阅读