javascript - ReactJS:(大)子组件上的 onClick 处理程序不起作用

Question

我正在尝试使用 React、Redux 获得一个带有嵌套 React 组件的简单页面。根本问题不是由于 Redux/connect 造成的，因为如果我尝试使用代码，我就能够分派(dispatch)操作。

我的问题是，当我单击图像(甚至按钮)时，我没有看到任何事件被触发。

孙组件的render方法:

<Fragment>
    <div key={blog.id} className='mb-1 mt-1'>
        <img key={blog.id} src={ path_im } alt={'blog'} width="15" height="15" 
         onClick={this.props.onPrefClick} />
  </div>
</Fragment>

我是 React、Redux 的新手，并且尝试了很多可以在网上找到的解决方案，但是在我的情况下似乎没有任何效果，我现在陷入困境。

我的组件的方式是:

<Dashboard\>
  <BlogList\>

博客列表(父组件):

  <div>
     { this.props.blogs.map(this.renderBlogItem) }
  </div>

  updatePreference = (blog) => {
      console.log('1 Blog List this.updatePreference: clicked ');
  }

  renderBlogItem = blog => {
      return <BlogItem key={'m0' + blog.id} onBlogClick={() => this.updatePreference(blog)} />;
  }

BlogItem(直接子组件)

//this has some JSX static code and below child component
<PreferenceItem key={blog.id} onPrefClick={() => this.props.onBlogClick} />

PreferenceItem(孙组件)

//this has some JSX static code and below image with onClick
<div key={blog.id} className='mb-1 mt-1'>
    <img key={blog.id} src={ path_im } alt={'blog'} width="15" height="15" onClick={this.props.onPrefClick}/>

我希望它应该是一个简单的事件流，但是有些东西不起作用，我简化了它并更改了所有三个组件中的单击功能，更改了，绑定(bind)到粗箭头(=>)和其他选项，但是每当我单击图像时， onClick 甚至不会被触发(在使用我的代码期间，当我在孙子组件中使用绑定(bind)时(在同一个类中定义函数)，它触发了该事件，但是在页面加载期间 - 这是错误的

所以这里有些不对劲。

样本working code ，它在一层嵌套了子级

我主要关注 reactjs 的官方文档, react-redux以及来自 freecodecamp.org 的一些引用:

还有一个问题

我现在可以粘贴图像 - Chrome 调试工具显示图像元素的 EventListener 处理程序指向 noop 函数，并且 FunctionLocation 未知 (为什么是这个 noop？这反射(reflect)了我的绑定(bind)不正确，但我无法修复它)

如果我看到孙子的属性，它指向 onPrefClick

还请指导我，以便我可以调试此问题以找到根本原因？

Element is Component is now referring to onBlogClick

Answer 1

此行有语法错误。

<img key={blog.id} src={ path_im } alt={'blog'} width="15" height="15" onClick=this.props.onPrefClick}/>

上面应该是onClick={() => this.props.onPrefClick()}(这里也做了修改)。

事实

当您需要调用在父类上声明的子组件中的函数时，您只需将该函数传递给子组件

<ChildComponent function={this.onClickFunction} />

然后需要调用子组件中的函数

<img onClick={() => this.props.function()}

在子组件中，您应该调用该函数。

<Fragment>
    <div key={blog.id} className='mb-1 mt-1'>
        <img key={blog.id} src={ path_im } alt={'blog'} width="15" height="15" 
         onClick={() => this.props.onPrefClick()} />
  </div>
</Fragment>