Показать и скрыть все - Реагировать - PullRequest
Новая
       16

Показать и скрыть все - Реагировать

0 голосов
/ 04 февраля 2020

Я играю с React. js, чтобы улучшить свои навыки. Упражнение простое, у меня есть 3 таймера CountDown, каждый из которых запускается отдельной кнопкой. Тем не менее, я не могу понять, как показать один CountDown и скрыть все остальные. Кроме того, было бы неплохо плавно переключаться между ними, не нажимая кнопку, чтобы «закрыть» текущий отсчет времени, чтобы показать другой. Я надеюсь это имеет смысл. Спасибо !! 

import React from 'react'

import Buttons from './Buttons/Buttons'
import Display02 from './Display/Display02'

import classes from './Q5Root.module.css'


class Q5Root extends React.Component {
    constructor(props) {
        super(props)

        this.state = {
            christmas: false,
            birthday: false,
            newYear: false
        }

    }

    handleChristmas = () => {
        this.setState({
            christmas: !this.state.christmas
        })
    }

    handleBirthDay = () => {
        this.setState({
            birthday: !this.state.birthday
        })
    }

    handleNewYear = () => {
        this.setState({
            newYear: !this.state.newYear
        })
    }


    render() {
        let CountDownText = null

        //this.state.christmas ? <Display02 date="Dec 24, 2020 15:37:25" /> : <p>Happy CountDown</p>
        //this.state.birthday ? <Display02 date="Sep 21, 2020 14:00:00" /> : <p>Happy CountDown</p>
        //this.state.newYear ? <Display02 date="Dec 31, 2020 15:37:25" /> : <p>Happy CountDown</p>

        if (this.state.christmas === true && this.state.birthday === false && this.state.newYear === false) {
            console.log('christmas')
            CountDownText = <Display02 date="Dec 24, 2020 15:37:25" /> 
        } else if (this.state.christmas === false && this.state.birthday === true && this.state.newYear === false) {
            console.log('birthday')
            CountDownText = <Display02 date="Sep 29, 2020 14:00:00" /> 
        } else if (this.state.christmas === false && this.state.birthday === false && this.state.newYear === true) {
            console.log('newYear')
            CountDownText =  <Display02 date="Dec 31, 2020 15:37:25" /> 
        } else {
            CountDownText = <p>Start The CountDown</p>
        }


        return (
            <div className={classes.layout}>
                {CountDownText}
                <Buttons
                    christmas={this.handleChristmas}
                    myBirthday={this.handleBirthDay}
                    newYear={this.handleNewYear} />
            </div>

        )

    }
}

export default Q5Root

1 Ответ

0 голосов
/ 04 февраля 2020

Вот прямая ссылка: https://codesandbox.io/s/dreamy-taussig-yv2wp

Примечание :

Это просто основа c Реализация Я не знаю ваших кнопок и Дисплей код компонента пока. Это просто PO C для справки

Есть несколько вещей, которые вы можете сделать с вашим кодом:

  1. Первый трек все то есть, если щелкнуть на рождество, сделать все остальные состояния ложными. Это уменьшит ваше длительное состояние чеков, то есть: 
if (this.state.christmas === true && this.state.birthday === false && this.state.newYear === false) {
            console.log('christmas')
            CountDownText = <Display02 date="Dec 24, 2020 15:37:25" /> 
        } else if (this.state.christmas === false && this.state.birthday === true && this.state.newYear === false) {
            console.log('birthday')
            CountDownText = <Display02 date="Sep 29, 2020 14:00:00" /> 
        } else if (this.state.christmas === false && this.state.birthday === false && this.state.newYear === true) {
            console.log('newYear')
            CountDownText =  <Display02 date="Dec 31, 2020 15:37:25" /> 
        } else {
            CountDownText = <p>Start The CountDown</p>
        }

до 

if (this.state.christmas === true) {
          console.log('christmas')
          CountDownText = <Display02 date="Dec 24, 2020 15:37:25" /> 
      } else if (this.state.birthday === true ) {
          console.log('birthday')
          CountDownText = <Display02 date="Sep 29, 2020 14:00:00" /> 
      } else if (this.state.newYear === true) {
          console.log('newYear')
          CountDownText =  <Display02 date="Dec 31, 2020 15:37:25" /> 
      } else {
          CountDownText = <p>Start The CountDown</p>
      }
Как бы вы достигли в первую очередь. Легко просто установить все остальные переменные в false в setState: 
handleChristmas = () => {
      this.setState({
          christmas: !this.state.christmas,
          birthday: false,
          newYear: false
      })
  }

  handleBirthDay = () => {
      this.setState({
          birthday: !this.state.birthday,
          christmas: false,
          newYear: false
      })
  }

  handleNewYear = () => {
      this.setState({
          newYear: !this.state.newYear,
          birthday: false,
          christmas: false
      })
  }

Вот и все: -)

FullCode: 

import React from "react";
import "./styles.css";

const Buttons = ({christmas,myBirthday,newYear}) => {
  return (
    <>
    <button onClick={christmas}>christmas</button>
    <button onClick={myBirthday}>myBirthday</button>
    <button onClick={newYear}>newYear</button>
    </>
  )
}
const Display02 = ({date}) => {
  return  (
    <h1>
      {date}
    </h1>
  )
}
class Q5Root extends React.Component {
  constructor(props) {
      super(props)

      this.state = {
          christmas: false,
          birthday: false,
          newYear: false
      }

  }

  handleChristmas = () => {
      this.setState({
          christmas: !this.state.christmas,
          birthday: false,
          newYear: false
      })
  }

  handleBirthDay = () => {
      this.setState({
          birthday: !this.state.birthday,
          christmas: false,
          newYear: false
      })
  }

  handleNewYear = () => {
      this.setState({
          newYear: !this.state.newYear,
          birthday: false,
          christmas: false
      })
  }


  render() {
      let CountDownText = null

      //this.state.christmas ? <Display02 date="Dec 24, 2020 15:37:25" /> : <p>Happy CountDown</p>
      //this.state.birthday ? <Display02 date="Sep 21, 2020 14:00:00" /> : <p>Happy CountDown</p>
      //this.state.newYear ? <Display02 date="Dec 31, 2020 15:37:25" /> : <p>Happy CountDown</p>

      if (this.state.christmas === true) {
          console.log('christmas')
          CountDownText = <Display02 date="Dec 24, 2020 15:37:25" /> 
      } else if (this.state.birthday === true ) {
          console.log('birthday')
          CountDownText = <Display02 date="Sep 29, 2020 14:00:00" /> 
      } else if (this.state.newYear === true) {
          console.log('newYear')
          CountDownText =  <Display02 date="Dec 31, 2020 15:37:25" /> 
      } else {
          CountDownText = <p>Start The CountDown</p>
      }


      return (
          <div>
              {CountDownText}
              <Buttons
                  christmas={this.handleChristmas}
                  myBirthday={this.handleBirthDay}
                  newYear={this.handleNewYear} />
          </div>

      )

  }
}

export default function App() {
  return (
    <div className="App">
      <Q5Root/>
    </div>
  );
}
...