反应。 onClick事件未触发

Question

在我的导航栏中，我有一个按钮，当单击该按钮时将显示一个子菜单（项目列表）。 每个项目都是他们自己的子组件，当我单击它们时，我希望他们触发一个事件。 onClick事件侦听器根本没有响应。 但是，还会应用其他鼠标事件（onMouseEnter，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>
    )
}

}

父组件：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)

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

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

Answer 1

对于仍然感兴趣的人，这是Bootstrap的问题。 因为这些元素是在Bootstrap下拉菜单中创建的，所以有些逻辑我看不到。 每当我单击某个元素时，该下拉列表就会在事件处理程序触发之前关闭。

选择创建自己的下拉菜单。 谢谢大家！

Answer 2

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

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

Answer 3

尝试这个

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

Answer 4

您创建了一个箭头函数，无需将其绑定到构造函数中

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