显示和隐藏所有 - React

Question

我正在玩 React.js 来提高我的技能。练习很简单，我有 3 个倒计时时钟，每个时钟由一个单独的按钮触发。但是，我似乎无法弄清楚如何显示一个倒计时并隐藏所有其他倒计时。此外，如果无需单击 'close' 和运行倒计时按钮即可在它们之间顺利切换以显示另一个，那就太好了。我希望这是有道理的。谢谢！！

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

Answer 1

现场直播link：https://codesandbox.io/s/dreamy-taussig-yv2wp

注 :

It just a basic implementaion I dont know your buttons and Display component code yet. It just a POC for reference

您可以对代码做的事情很少：

首先跟踪所有点击，即如果点击圣诞节，则所有其他状态都为假。它将减少您的长期检查条件，即：

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>
      }

你会如何达到第一。只需在 setState 中将所有 rest 变量设置为 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
      })
  }

就是这样:-)

完整代码：

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>
  );
}

显示和隐藏所有 - React

Show and hide all - React

visibility

show-hide

reactjs