Реагировать - исчезать и исчезать - PullRequest
Новая
       10

Реагировать - исчезать и исчезать

0 голосов
/ 25 июня 2018

Я новичок, чтобы отреагировать - я уверен, что это простая проблема, но у меня много проблем с поиском решения.

Итак, у меня есть две кнопки. Нажмите на первую кнопку, она должна открыться, и если я нажму на ту же кнопку (кнопка1) или если я нажму на кнопку (кнопка2), она должна исчезнуть. то же самое для кнопки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>

    )
  }
}

Пожалуйста, помогите с кодом about.

Заранее спасибо.

Первый скриншот First screenshot

Второй снимок Second screnshot

1 Ответ

0 голосов
/ 25 июня 2018

Вы передаете объект, не являющийся логическим значением, методу handleClick.Вот как это должно быть: 

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

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