Question

我正在尝试让图像在React.js上消失但是如果有2个图像并且点击了一个，它们都会消失。我只需要一个在点击它们时消失。我正在添加一个在点击时会'显示：无'的课程。

class Home extends Component {
constructor(props) {
  super(props);
  this.state = {addClass: false}
}
handleClick() {
    this.setState({addClass: !this.state.addClass});
  }
render () {
    let clickedClass = ["beer"];
    if(this.state.addClass) {
        clickedClass.push('gone');
    }
    return (
        <div>
                    <img id="beer1" className={clickedClass.join(' ')} src={('/images/beer1.png')} onClick={(e) => this.handleClick(e)}/>
                    <img id="beer2" className={clickedClass.join(' ')} src={('/images/beer2.png')} onClick={(e) => this.handleClick(e)}/>
        </div>
    )
}

}

Answer 1

状态很常见，所以当你切换它时，它适用于两个图像。

选项1 ：创建一个传递图像并具有状态的组件。创建2个组件时，将有2个独立状态。通常这是要走的路。

选项2 ：在州有2个属性。 E.g：

 this.state ={showTopImage: true, showBottomImage: false}

之后，根据您点击的图像处理点击。

React.js - 两个图像在点击时消失 - 我如何只使1消失

1 个答案: