Next.js+React进门记011【使用React的useState函数】

最新推荐文章于 2024-08-12 22:28:07 发布

kaikyou3000

最新推荐文章于 2024-08-12 22:28:07 发布

阅读量220

点赞数 1

文章标签： javascript react.js 开发语言

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

版权

计划：在index页面的Home组件上设置点击事件，每点击一次数值发生递增。

更新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 { useEffect } from 'react'

export default function Home() {
  let bar =1; 
  const handleclick = (e) =>{
    bar = bar + 1;
    console.log(bar);
  };

  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 />
      <h1>{bar}</h1>
      <button  onClick={handleclick}>
      累计按钮
      </button>
       <Main page="index"/>
     <Footer />
    </div>
  )
}

打开浏览器控制台，连续点击累计按钮5次，可发现控制台已经正常累加数值

上图之所以页面数字没有和控制台一样发生变化，是因为根据React规则，组件状态没有发生变化时，组件就不会再次渲染，所以组件中的变量bar的值无法得到更新。不过可以通过React的useState组件状态控制函数，实现组件中的变量bar也随着按钮点击事件不断更新。

useState函数返回一个状态和一个修改状态的方法，该方法可以在点击事件中调用，以下对index.js页面进行修改，引入和使用useState函数。

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 { useEffect, useState } from 'react'

export default function Home() {
  const[bar, setBar] = useState(1);
 
  const handleclick = (e) =>{
    setBar((bar) => bar + 1);
  };
  console.log(bar);
  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 />
      <h1>{bar}</h1>
      <button  onClick={handleclick}>
      累计按钮
      </button>
       <Main page="index"/>
     <Footer />
    </div>
  )
}

测试成功，学习计划完成。

kaikyou3000

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Next.js+React进门记011【使用React的useState函数】

上图之所以页面数字没有和控制台一样发生变化，是因为根据React规则，组件状态没有发生变化时，组件就不会再次渲染，所以组件中的变量bar的值无法得到更新。不过可以通过React的useState组件状态控制函数，实现组件中的变量bar也随着按钮点击事件不断更新。useState函数返回一个状态和一个修改状态的方法，该方法可以在点击事件中调用，以下对index.js页面进行修改，引入和使用useState函数。计划：在index页面的Home组件上设置点击事件，每点击一次数值发生递增。
复制链接

扫一扫