Next.js+React进门记014【useState处理布尔型数据】

kaikyou3000

已于 2024-06-22 15:34:02 修改

阅读量320

点赞数 2

文章标签： javascript react.js 前端

于 2024-06-22 15:29:03 首次发布

本文链接：https://blog.csdn.net/kaikyou3000/article/details/139880305

版权

计划：点击“显示”按钮时，按钮上方的数字就会显示，随之按钮名称变更为“不显示”。与此相反，点击“不显示”按钮时，按钮上方的数字就会消失，随之按钮名称变更为“显示”。

首先在index.js页面的Home组件中设置1个布尔值，初始值为“true”。

设置一个点击事件函数handleDisplay，用于true和false之间的切换。

添加三元运算，用来数字显示和不显示之间的切换

添加一个按钮，用来调用handleDisplay事件函数

index.js页面代码修改如下

import Head from 'next/head'
import styles from '../styles/Home.module.css'
import { Footer } from '../components/Footer'
import { Main } from '../components/Main'
import { Header } from '../components/Header'
import { useCallback, useEffect, useState } from 'react'

export default function Home() {
  const[bar, setBar] = useState(1);
  const[text, setText] = useState("a");
  const[isShow, setIsShow] = useState(true);
 
  const handleClick = useCallback((e) =>{
    console.log(bar); 
      setBar((prevBar) => prevBar + 1);
  },[bar]);
  
  const handleChange = useCallback((e) => {
    console.log(text);
    if (e.target.value.length > 5) {
      alert("输入不能超过5个字符");
      return;
    }
    setText(e.target.value.trim());
  },[]);

  const handleDisplay = useCallback(() => {
    setIsShow((prevIsShow) => {
      console.log(prevIsShow);//打印前一次状态
      if (prevIsShow){
        return false;
      }else{return true;}
    });
  },[]);
  
  useEffect(() =>{
    document.body.style.backgroundColor = "lightblue";
    return (() =>{
      document.body.style.backgroundColor = "lightgreen";
    })
  },[]);

  return (
    <div className={styles.container}>
      <Head>
        <title>Index page</title>
        <link rel="icon" href="/favicon.ico" />
      </Head>
      <Header />
      {isShow ? <h1>{bar}</h1> : null}
      <button  onClick={handleClick}>
      累计按钮
      </button>
      <button onClick={handleDisplay}>
        {isShow ? "不显示" : "显示"}
      </button>
  
      <input type="text" value={text} onChange={handleChange} />
       <Main page="index"/>
     <Footer />
    </div>
  )
}

刷新index.js页面，点击“不显示”按钮