我正在尝试使用React、Redux构建一个嵌套的简单页面。底层问题并不是由于Redux/connect引起的,因为如果我尝试操作代码,我可以成功调度操作。
我的问题是,当我点击图片(甚至按钮)时,并没有看到任何事件被触发。
渲染 孙子组件的方法:
<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)} />;
}
博客项(直接子组件)
//this has some JSX static code and below child component
<PreferenceItem key={blog.id} onPrefClick={() => this.props.onBlogClick} />
偏好项(子组件的子组件)
//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}/>
我原本希望这是一个简单的事件流程,但是有些地方出了问题。我将其简化并更改了所有三个组件中的点击函数,改为箭头函数(=>)和其他选项,但无论何时我点击图片,
onClick
都没有被触发(当我在代码中进行操作时,在孙子组件中使用绑定(与在同一类中定义的函数),它触发了事件,但在页面加载期间不应该这样)。所以这里有些不对劲。
这里有一个示例工作的代码,其中有一个嵌套的子级。
我主要遵循官方文档reactjs、react-redux和一些来自freecodecamp.org的参考资料。
还有一个问题
我现在无法粘贴图像 - Chrome 调试工具显示图像元素的 EventListener 的处理程序指向 noop 函数,而 FunctionLocation 是未知的 (为什么是 noop?这反映了我的绑定不正确,但我无法修复它)
如果我查看孙子的属性,它指向 onPrefClick
请也指导我如何调试以找到根本原因?