React-淡入淡出

Question

我是新手 - 我确信这是一个简单的问题，但我在寻找解决方案时遇到了很多麻烦。

所以我有两个按钮。点击第一个按钮它应该打开淡入，如果我点击同一个按钮（button1）或者如果我点击按钮（button2）它应该淡出。按钮 2 也一样。到目前为止，我设法弄清楚淡入是如何工作的，但无法解决淡出问题。

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>

    )
  }
}

请帮忙修改关于代码。

提前致谢。

First screenshot

Second screnshot

Answer 1

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

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

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

React-淡入淡出

React- fade in and fade out

reactjs

react-transition-group