ReactJS：（大）子组件上的 onClick 处理程序不起作用

Question

I am trying to get a simple page with nested react components using React, Redux. The underlying problem is not due to Redux / connect because if I try to play with code, I am able to dispatch the actions.

My problem is that when I click the image (or even a button), I don't see any event being triggered.

render method of grand child component:

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

I am new to React, Redux and have tried lot of solutions, that I could find on net, however nothing seems to work in my case and I am stuck on this now.

The way my components are:

<Dashboard\>
  <BlogList\>

Bloglist (parent component):

  <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(Immediate Child component)

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

PreferenceItem (grand child component)

//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}/>

I was hoping that it should be a simple flow of events, but something is not working, I simplified it and changed Click functions in all the three components, changed, bind to fat arrow(=>) and other options, but whenever I click on image, onClick doesn't even getting fired (during playing with my code, when I used bind in grandchild component (with function defined in the same class), it fired the event, but during loading of the page - which is wrong

So something is not right here.

Sample working code , which has nested child at one level

I am following mainly official docs from reactjs , react-redux and some reference from the freecodecamp.org :

One more question

I am now allowed to paste image - Chrome debug tool shows that image element's EventListener's handler is pointing to noop function and FunctionLocation is unknown (why is this noop? This reflects that my bindings are not correct, but I am not able to fix it)

And if I see the grand child's properties, it is pointing to onPrefClick

Please also direct me so I could debug this to reach the root cause?

Element is Component is now referring to onBlogClick

Answer 1

I see one issue here - should be calling the function as well () => this.props.onBlogClick() :

<PreferenceItem key={blog.id} onPrefClick={() => this.props.onBlogClick} />

I guess this line should be the following:

<PreferenceItem key={blog.id} onPrefClick={this.props.onBlogClick} />

You were not calling the function, just returning it.

The other issue - maybe it is just a typo in your question but there is a missing { at onClick :

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

I hope that helps!

Answer 2

You have syntax errors on this line.

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

Above it should be onClick={() => this.props.onPrefClick()} (Also did the modification here).

The Fact

When you need call a function in child component which is declared on a parent class you just need the pass the function to child component

<ChildComponent function={this.onClickFunction} />

Then you need to invoke the function in child component

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

In granchild component you should invoke the 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>