react工程里点击事件没效果,控制台里也没有报错

Question

代码地址

没效果的代码

export default class User extends Component {
  logout() {
    console.log(1)
        const alert = Modal.alert
        alert('注销', '确认退出登录吗???', [
              { text: '取消', onPress: () => console.log('cancel') },
              { text: '确认', onPress: () => {
                  browserCookie.erase('userid')
                  this.props.logoutSubmit()
              }}
            ])
  }
  render() {
        const props = this.props
        const Item = List.Item
        const Brief = Item.Brief    
    return props.user ? (
      <div>
        <Result
          img={<img src={require(`../img/${props.avatar}.png`)} tyle={{ width: 50 }} alt="" />}
          title={props.user}
          message={props.type === 'boss' ? props.company : null}
        />
                <List renderHeader={()=>'简介'}>
            <Item multipleLine>
              {props.title}
              {props.desc.split('\n').map(v=><Brief key={v}>{v}</Brief>)}
              {props.money?<Brief>薪资:{props.money}</Brief>:null}
            </Item>          
        </List>
                <WhiteSpace></WhiteSpace>
                <List>
          <Item onClick={() => this.logout()}>退出登录</Item>
        </List>  
      </div>
    ) : <Redirect to={props.redirectTo} />
  }
}

很奇怪的问题,也不知道是什么原因,现在就算在其他文件里加点击事件也不起作用,控制台既不打印,也不报错

Answer 1

仔细看样式，你会发现有一个带clss为am-tab-bar的元素遮盖了整个屏幕，这个元素层级太高，遮盖了其他页面元素，所以你点击的时候事件不会生效。可以把这个类的z-index设为-1,就可以解决了

Answer 2

<Item onClick={() => this.logout()}>退出登录</Item>

你这样写是把() => this.logout()当props传到Item里，Item里调用了onClick吗

Answer 3

或许onClick根本就没有执行

或者Item组件没有onClick的回调。

Answer 4

我也碰见这个问题了，请问你解决了吗

Answer 5

antd的list的item本身不支持注册onclick事件，需要给Item里的子元素注册

点击clickme 看看

Answer 6

原因是其他元素把该按钮遮盖住了，可以改变该元素的z-index属性值

Answer 7

es6里的继承,不是需要显式的调用父类的构造函数来生成this吗?