反应-淡入淡出

Question

我是新来的反应者-我确定这是一个简单的问题，但在解决方案方面遇到很多麻烦。

所以我有两个按钮。当单击第一个按钮时，它应该打开淡入，如果我单击相同的按钮（button1），或者如果单击按钮（button2），则淡出。对于button2相同。 到目前为止，我设法弄清了淡入淡出的效果，但无法解决淡入淡出的情况。

import React, { Component } from 'react'
import { Jumbotron, Grid, Row, Col, Image, Button, Carousel,Fade,Well } from 'react-bootstrap';
import './About.css';

export default class About extends Component {
  constructor(props, context) {
    super(props, context);
    this.state = {
      buttonPressed: false,
      buttonPressed1: false

      //open: false
    }
    
}

handleClick = (button) => {
  this.setState({ buttonPressed: button })
}
handleClick1 = (button) => {
  this.setState({ buttonPressed1: button })
}
  render() {
    return (
      <Grid>
      <button className='button1' onClick={() => this.handleClick({ open: !this.state.buttonPressed })}>
      BUTTON 1
           </button>
           <button className='button2' onClick={() => this.handleClick1({ open: !this.state.buttonPressed1 })}>
      BUTTON 2
           </button>
           <Fade class='fade1' in={this.state.buttonPressed}>
          <div>
            <Well>
             first
            </Well>
          </div>
        </Fade>
        <Fade class='fade2' in={this.state.buttonPressed1}>
          <div>
            <Well>
              second
            </Well>
          </div>
        </Fade>
      </Grid>

    )
  }
}

请提供关于代码的帮助。

谢谢。

  

第一个屏幕截图   

     

第二个快照   

Answer 1

您正在将一个不是布尔值的对象传递给handleClick方法。应该是这样的：

handleClick = (button) => {
  this.setState({ buttonPressed: button.open })
}

handleClick1 = (button) => {
  this.setState({ buttonPressed1: button.open })
}