使用箭头功能未在React组件上触发事件

Question

import React, { Component } from 'react'
import { connect } from 'react-redux'

@connect(
    state=>state.user
)
class Profile extends Component {

    logout(){
        alert('logout')
    }

    render() {
        const props = this.props
        return props.user && (
            <div>
              <button onClick={()=>{this.logout()}}>Logout</button>
            </div>
        )
    }
}

export default Profile

I click on the button, the alert is not triggered, no error no warning now I'm lost. What can be the possible cause?

Answer 1

I tried below code and everything seems fine. May be your this.props is not having any value. Can you share that code as well. I see everything is fine in component.

class Hello extends React.Component {

logout(){
    alert('logout')
}

render() {

    return (
        <div>
          <button onClick={()=>{this.logout()}}>Logout</button>
        </div>
    )
}

}

ReactDOM.render( , document