时间戳

首页 > 解决方案 > ReactJs - onClick 不触发

reactjs - ReactJs - onClick 不触发

问题描述

可能是一个超级菜鸟问题，但有人知道为什么我的 onClick 没有触发吗？我已经尝试在我的 CSS 中更改 z-index，以防按钮太靠后，但这并没有改变任何东西。

这是我的按钮模块：

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 语句都不会触发。

感谢所有帮助。

///

根据评论 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。在按下按钮时，这个 div 通过更改为 .background_left 类滑动到左侧大小的一半。按钮包含在 background_right 中。如果我将 .background_left 中的高度更改为 200 像素，按钮将起作用（包括悬停），但显然这完全打乱了我的样式。有什么建议么？

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


 }

标签： reactjs

解决方案

我不确定为什么会这样，但我没有使用 100vh 和 100vw，而是使用了 display:absolute 和 width:50%/ 100% 和 height:100%。如果有人能解释为什么会这样，我将非常感激。

推荐阅读