Question

我有一个组件，该组件的状态为“样式”，每当单击按钮时，该颜色就会在我的颜色数组中变为随机颜色。该状态在style属性中传递，以便backgroundColor变为任何状态。这是可行的，但是每当我尝试将css添加到按钮时，它就会按预期停止工作。我有种预感，这可能是因为我使用了绝对职位，但我不知道为什么要这么做。

我所能做的就是注释掉CSS，使按钮再次起作用，但这确实不能解决我的问题。

import React, {Component} from 'react';
import "./Tap.css";

class Tap extends Component{
    constructor(props){
        super();
        this.state={
            style: ''
        }
        this.handleClick = this.handleClick.bind(this);
    }
    handleClick(){
        const colors = ["#68ad45", "#123456", "#987546", "#ab23c6", "#324517", "#456819"];
        let i = Math.floor(Math.random() * 6);
        this.setState({
            style: colors[i]
        });
    }
  render(){
    return(
      <div className="Tap" style={{backgroundColor: this.state.style}}>
          <button onClick={this.handleClick}>Click Here</button>
      </div>
    );
  }
}

export default Tap;

// ========================== CSS file ==========================


.Tap button{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    border: none;
    outline: none;
    padding: 10px;
    font-size: 200px;
    cursor: pointer;
}

没有错误消息，使用css对其进行样式设置后，按钮不会产生任何结果。

Answer 1

这是因为：position: absolute被添加到按钮中，因此Tab div现在没有高度

一种解决方案：将div固定为div高度

.Tap {
  height: 50px;
}

请参见Example 1

但是，如果您注意到由于绝对位置，选项卡与按钮未对齐。

其他解决方案将Tab而不是按钮定位为absolute，并带有一些填充：

请参见example 2

Answer 2

只需进行此简单更改<button onClick={this.handleClick} style={{backgroundColor: this.state.style}}>Click Here</button>

检查示例代码-https://stackblitz.com/edit/react-soy8a4

当我向其中添加CSS时，React组件停止工作

2 个答案: