ReactJs - onClick未触发

Question

可能是一个超级新手的问题，但是有人知道为什么我的onClick不能启动吗？我曾尝试更改CSS中的z索引，以防按钮太靠后，但这并没有改变任何东西。

这是我的按钮模块：

import React from 'react';
import classes from './button.module.css';

const button = (props)=>{

    return(
        <button onClick={()=>{console.log("hello");props.select()}} className={classes.button}>
            <div className={classes.text_center}>
            <div className={classes.button_text}>{props.text}</div></div>
        </button>
    );
}

export default button;

稍后我会调用这个模块：

this.state.skills?null:<Button select={()=>{console.log("hi");this.setState({skills:true})}} text={"Skills"}></Button>}.

按钮实际上显示得很好，文本是作为一个道具传递的，但不幸的是，我不能触发onClick。这两个console.log语句都不会触发。

感谢所有的帮助。

///

根据comments button.module.css中的要求：

@font-face {
    font-family: 'Raleway';
    src: url('../../../Fonts/Raleway/Raleway-Light.ttf') format('truetype') /* IE6-IE8 */
  }

.button_choice{
    width:10vw;
    height:10vh;
    top:25%;
    border: 2px solid #4ca3dd;
    position: relative;
    display: inline-block;
    margin-left:5vw;
    background-color: white;
    vertical-align: middle;
    border-radius:10px;
    padding:5px;

}

.button_choice:hover{
    background-color: red;
}



.text_center{
    height:100%;
    width:100%;
    position:relative;
    display: table;
}

.text_center:hover{
    background-color: blue;
}

.button_text{
   font-family:"Raleway";
   position:relative;
    line-height: 30px;
    font-size: 20px;
    text-align: center; 
    display: table-cell;
    vertical-align: middle;

}

/

稍微突破:/，当考虑到下面的3个类时，.background_init是一个分布在整个页面上的div。按下按钮后，通过更改为类.background_left，此div将滑动到左侧大小的一半。这些按钮包含在background_right中。如果我在.background_left中将height更改为200px，按钮可以工作(包括悬停)，但显然这会完全搞乱我的样式。有什么建议吗？

.background_init{
width:100vw;
height:100vh;
background-color: #4ca3dd;


}

.background_left{
    width:50vw;
    height:100vh;
    background-color: #4ca3dd;
    transition: width 2s;
}

.background_right{
        overflow: auto;
        width:50vw;
        height:100vh;
        transition: width 2s;


 }

Answer 1

我不确定为什么会这样，但我没有使用100vh和100vw，而是使用了display:绝对和宽度:50%/ 100%和高度:100%。如果有人能解释为什么这是可行的，我将非常感激。