Javascript 反应onClick事件未触发

在导航栏中，我有一个按钮，单击该按钮时将显示一个子菜单（项目列表）。每个项目都是它们自己的子组件，单击时我希望它们触发一个事件。onClick事件侦听器根本没有响应。但是，其他鼠标事件也适用（onmouseinter、onMouseOut等）。谁都知道怎么回事

子组件：NotificationItem.js

import React from "react"
import { connect } from "react-redux"
import { updateNotification } from "../../actions/notificationActions"

class NotificationItem extends React.Component{
constructor(props){
    super(props)

    this.handleOnClick = this.handleOnClick.bind(this)
}

handleOnClick = (event) => {
    console.log("clicked")
    // let notificationId = this.props.notification._id
    // this.props.updateNotification(notificationId)
}

render(){
    let {avatar, description, seen} = this.props.notification
    return(
        <div
            onClick={this.handleOnClick}
            className="d-flex notification-wrapper" 
            style={ seen ? (
                { width: "250px", whiteSpace: "normal", padding: "0.5rem" } 
                ):( { width: "250px", whiteSpace: "normal", padding: "0.5rem", backgroundColor: "#d7e2f4" }
                )
            }
            >
            <div>
                <img src={avatar} style={{ width: "25px"}} className="mr-2 rounded-circle"/>
            </div>
            <div>
                {description}
            </div>
        </div>
    )
}

从“React”导入React
从“react redux”导入{connect}
从“./../actions/notificationActions”导入{updateNotification}
类NotificationItem扩展React.Component{
建造师（道具）{
超级（道具）
this.handleOnClick=this.handleOnClick.bind（this）
}
handleOnClick=（事件）=>{
console.log（“单击”）
//让notificationId=this.props.notification.\u id
//this.props.updateNotification（notificationId）
}
render（）{
让{avatar，description，seed}=this.props.notification
返回(
{说明}
)
}

}

父组件：NotificationFeed.js

import React from "react"
import { connect } from "react-redux"
import NotificationItem from "./NotificationItem"

class NotificationFeed extends React.Component{
constructor(props){
    super(props)
}

render(){
    let notifications = this.props.notification.notifications
    return(
        <div className="dropdown-menu">
            {notifications.map((notification, index) => {
                return(
                    <div key={index}>
                        <NotificationItem notification={notification}/>
                    </div>
                )
            })}         
        </div>
    )
}
}

const mapStateToProps = (state) => {
return{
    notification: state.notification
}
}

export default connect(mapStateToProps)(NotificationFeed)

从“React”导入React
从“react redux”导入{connect}
从“/NotificationItem”导入NotificationItem
类NotificationFeed扩展React.Component{
建造师（道具）{
超级（道具）
}
render（）{
让通知=this.props.notification.notifications
返回(
{notifications.map（（通知，索引）=>{
返回(
)
})}         
)
}
}
常量mapStateToProps=（状态）=>{
返回{
通知：state.notification
}
}
导出默认连接（MapStateTrops）（NotificationFeed）

编辑：我注意到一些可能有帮助的东西。我正在使用一个引导类来创建这个下拉切换效果。单击其中一项时，子菜单将立即关闭，而不会在组件上触发所需的事件处理程序

                <span className="dropdown" id="notifications-dropdown">
                <Link to="#" className="nav-link text-light dropdown-toggle" data-toggle="dropdown">
                    <span 
                        key={Math.random()}
                    >
                        <i className="fa fa-bell"></i>
                    </span> { windowWidth < 576 && "Notifications"}

                    <NotificationFeed/>

                </Link>
                </span>

{windowWidth<576&&“通知”}

尝试更改您的代码，现在就像方法：

handleOnClick(event){
    console.log("clicked")
}

---

尝试更改您的代码，现在就像方法：

handleOnClick(event){
    console.log("clicked")
}

试试这个

onClick={ (e) => this.handleOnClick(e)}

试试这个

onClick={ (e) => this.handleOnClick(e)}

---

您创建了一个箭头函数，不需要在构造函数中绑定它

    import React from "react"
    import { connect } from "react-redux"
    import { updateNotification } from "../../actions/notificationActions"

    class NotificationItem extends React.Component{
    state = {}

    handleOnClick = (event) => {
        console.log("clicked")
    }


    //or do not use arrow function then bind in the constructor
     //constructor(props) {
          //super(props);
          //this.handleOnClick = this.handleOnClick.bind(this)
     //}

   // handleOnClick(event) {
     // console.log("clicked")
   // }


    render(){
        let {avatar, description, seen} = this.props.notification
        return(
            <div
                onClick={this.handleOnClick}
                className="d-flex notification-wrapper" 
                style={ seen ? (
                    { width: "250px", whiteSpace: "normal", padding: "0.5rem" } 
                    ):( { width: "250px", whiteSpace: "normal", padding: "0.5rem", backgroundColor: "#d7e2f4" }
                    )
                }
                >
                <div>
                    <img src={avatar} style={{ width: "25px"}} className="mr-2 rounded-circle"/>
                </div>
                <div>
                    {description}
                </div>
            </div>
        )
    }

从“React”导入React
从“react redux”导入{connect}
从“./../actions/notificationActions”导入{updateNotification}
类NotificationItem扩展React.Component{
状态={}
handleOnClick=（事件）=>{
console.log（“单击”）
}
//或者不要使用arrow函数，然后在构造函数中绑定
//建造师（道具）{
//超级（道具）；
//this.handleOnClick=this.handleOnClick.bind（this）
//}
//点击（事件）{
//console.log（“单击”）
// }
render（）{
让{avatar，description，seed}=this.props.notification
返回(
{说明}
)
}

您创建了一个箭头函数，不需要在构造函数中绑定它

    import React from "react"
    import { connect } from "react-redux"
    import { updateNotification } from "../../actions/notificationActions"

    class NotificationItem extends React.Component{
    state = {}

    handleOnClick = (event) => {
        console.log("clicked")
    }


    //or do not use arrow function then bind in the constructor
     //constructor(props) {
          //super(props);
          //this.handleOnClick = this.handleOnClick.bind(this)
     //}

   // handleOnClick(event) {
     // console.log("clicked")
   // }


    render(){
        let {avatar, description, seen} = this.props.notification
        return(
            <div
                onClick={this.handleOnClick}
                className="d-flex notification-wrapper" 
                style={ seen ? (
                    { width: "250px", whiteSpace: "normal", padding: "0.5rem" } 
                    ):( { width: "250px", whiteSpace: "normal", padding: "0.5rem", backgroundColor: "#d7e2f4" }
                    )
                }
                >
                <div>
                    <img src={avatar} style={{ width: "25px"}} className="mr-2 rounded-circle"/>
                </div>
                <div>
                    {description}
                </div>
            </div>
        )
    }

从“React”导入React
从“react redux”导入{connect}
从“./../actions/notificationActions”导入{updateNotification}
类NotificationItem扩展React.Component{
状态={}
handleOnClick=（事件）=>{
console.log（“单击”）
}
//或者不要使用arrow函数，然后在构造函数中绑定
//建造师（道具）{
//超级（道具）；
//this.handleOnClick=this.handleOnClick.bind（this）
//}
//点击（事件）{
//console.log（“单击”）
// }
render（）{
让{avatar，description，seed}=this.props.notification
返回(
{说明}
)
}

对于那些仍然感兴趣的人来说，这是引导的问题。因为元素是在引导下拉列表中创建的，所以它有一些我看不到的逻辑。每当我单击元素时，下拉列表在事件处理程序启动之前关闭

---

选择创建我自己的下拉列表。谢谢大家！

对于那些仍然感兴趣的人来说，这是Bootstrap的一个问题。因为元素是在Bootstrap下拉列表中创建的，所以它有一些我看不到的逻辑。每当我单击一个元素时，下拉列表都会在事件处理程序启动之前关闭

---

选择创建我自己的下拉列表。谢谢大家！

如果您以这种方式定义事件处理程序，则不需要使用

.bind

行。但我不确定这是否会阻止处理程序触发。@Herohtar。我在没有绑定的情况下尝试过，也没有效果。您缺少了一个右括号

}

位于组件的

通知项的末尾。不确定这是复制粘贴问题还是源代码中也缺少此项。构造函数中不需要此行
this.handleOnClick=this.handleOnClick.bind（this）
（删除此项）像其他问题一样解决这个问题-删除bootstrap类/数据下拉列表中的任何内容，看看点击是否有效。如果是这样，bootstrap JS可能会改变元素，可能会用另一个替换它（就像其他下拉库中发生的情况一样）如果以这种方式定义事件处理程序，则不需要使用
.bind
行。但我不确定这是否会阻止处理程序启动。@Herohtar。我在没有绑定的情况下尝试过，也没有效果。您在
NotificationItem
组件末尾缺少一个右括号
}
。我不确定