React使用antd的TabBar后onClick事件为什么无法绑定？

Question

使用TabBar的地方：

 return (
            <div>
                <NavBar className='fixd-header' mode='dark'>
                    {navList.find(v => v.path === pathname).title}
                </NavBar>
                <div style={{ marginTop: 45 }}>
                    <Switch>
                        {/* {navList.map(v => ( */}
                            <Route path={'/me'} component={User}></Route>
                        {/* ))} */}
                    </Switch>
                </div>
                <button onClick={this.logout}>注销</button>
                <NavLinkBar data={navList}></NavLinkBar>
            </div>
        )

NavLinkBar组件是自己封装的TabBar:

 @withRouter
class NavLinkBar extends Component {
    static propTypes = {
        data: PropTypes.array.isRequired
    }

    render() {
        const navList = this.props.data.filter(v => !v.hide);
        const { pathname } = this.props.location
        return (
            <TabBar>
                {navList.map(v => (
                    <TabBar.Item
                        key={v.path}
                        title={v.text}
                        icon={{ uri: require(`./imgs/${v.icon}.png`) }}
                        selectedIcon={{ uri: require(`./imgs/${v.icon}-active.png`) }}
                        selected={pathname === v.path}
                        onPress={() => { this.props.history.push(v.path) }}></TabBar.Item>
                ))}
            </TabBar>
        )
    }
}

第一个代码片段中的button的onClick无法触发

User组件中也无法触发

 class User extends Component {
    constructor(props) {
        super(props)

        this.login = this.login.bind(this);
    }

    login() {
        console.log('login')
    }

    logout = () => {
        console.log('logout')
        // browserCookie.erase('userID')
    }

    render() {
        console.log(this.props)
        return (
            <div>
                <button onClick={this.login}>登录</button>
                <button onClick={this.logout}>注销</button>
            </div>
        )
    }
}

将NavLinkBar注释后均可触发

Answer 1

.am-tab-bar{
position: fixed;
bottom: 0;
width: 100%;
z-index: -1; //TabBar挡住了，所以点击无效
}