显示并隐藏全部-反应

问题描述 投票：0回答：1

我正在玩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
reactjs visibility show-hide
1个回答
0
投票

这里是实时链接：https://codesandbox.io/s/dreamy-taussig-yv2wp

注：

这只是一个基本实现，我还不知道您的buttons和Display组件代码。只是一个POC供参考

您可以对您的代码执行几项操作：

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

to

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>
      }
  1. 您将如何获得第一。只需在setState中将所有rest变量设置为false即可：：>
    2. 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>
  );
}
最新问题
© www.soinside.com 2019 - 2024. All rights reserved.