在 React 中创建一个单词计数器(使用 Hooks)

简介: 在 React 中创建一个单词计数器(使用 Hooks)

创建单词计数器,上代码:

import './App.css';
import React, {useEffect, useState} from "react";
export default function App() {
    //文本
    const [text,setText] = useState('')
    //单词数
    const [wordCount,setWordCount] = useState(0)
    //字符数
    const [charCount,setCharCount] = useState(0)
    function changeHandler(e) {
        setText(e.target.value)
    }
    useEffect(() => {
        //单词数组
        const words = text.split(' ');
        //更新字数
        let wordCount = 0
        words.forEach((word) => {
            if (word.trim() !== ''){
                wordCount++
            }
        })
        setWordCount(wordCount)
        //更新字符数
        setCharCount(text.length)
    },[text])
    return (
        <div className='container'>
            <h2>自动计算输入单词数</h2>
            <div>
                <textarea
                    value={text}
                    onChange={changeHandler}
                    placeholder="输入你的暴富想法"
                ></textarea>
                <p>单词个数:{wordCount}</p>
                <p>字数:{charCount}</p>
            </div>
        </div>
    )
}



以上代码,实现了一个可以自动计算输入的单词数和字符数的文本框。


其中,useState用来定义三个状态变量:


text表示输入的文本,

wordCount表示单词数,

charCount表示字符数。

changeHandler函数用来处理文本框内容的变化,将输入的文本存储在text状态变量中。


useEffect函数用来监听text状态变量的变化,当text改变时,将文本按空格分割成单词数组,再遍历数组计算单词数,更新wordCount状态变量;同时,更新charCount状态变量为text的长度。最后,将输入框、单词数和字符数显示在页面上。


相关文章
|
1月前
|
前端开发 JavaScript UED
使用React Hooks优化前端应用性能
本文将深入探讨如何使用React Hooks来优化前端应用的性能,重点介绍Hooks在状态管理、副作用处理和组件逻辑复用方面的应用。通过本文的指导,读者将了解到如何利用React Hooks提升前端应用的响应速度和用户体验。
|
3月前
|
前端开发 开发者
探索前端框架的新趋势:React Hooks的应用与实践
本文将深入探讨前端开发中的新趋势,重点介绍React Hooks的应用与实践。通过学习和使用React Hooks,开发者可以更高效地构建可维护、可扩展的前端应用程序。本文将详细介绍React Hooks的原理、优势以及如何在实际项目中运用Hooks来提高开发效率并改善代码结构。无论你是刚入门前端开发还是经验丰富的工程师,本文都将对你有所启发。
|
25天前
|
存储 缓存 前端开发
【React】Hooks面试题集锦
本文集合一些React的Hooks面试题,方便读者以后面试查漏补缺。作者给出自认为可以让面试官满意的简易答案,如果想要了解更深刻,可以点击链接查看对应的详细博文。在此对链接中的博文作者非常感谢🙏。
37 1
|
1月前
|
前端开发
利用React Hooks优化前端状态管理
本文将深入介绍如何利用React Hooks优化前端状态管理,包括Hooks的概念、使用方法以及与传统状态管理方式的对比分析,帮助前端开发人员更好地理解和应用这一现代化的状态管理方案。
|
1月前
|
前端开发 开发者
React Hooks:提升前端开发效率和代码可维护性
传统的 React 类组件在处理状态管理和生命周期函数时存在一些限制,而引入的 React Hooks 技术可以帮助前端开发者更高效地管理组件状态和逻辑,提升代码的可读性和可维护性。本文将介绍 React Hooks 的基本用法及其在实际项目中的应用场景。
|
2月前
|
前端开发 JavaScript 测试技术
React Hooks之useState、useRef
React Hooks之useState、useRef
|
2月前
|
存储 前端开发 JavaScript
React Hooks的useState、useRef使用
React Hooks的useState、useRef使用
22 2
|
2月前
|
存储 前端开发 JavaScript
探索前端框架React Hooks的魅力
【2月更文挑战第2天】本文深入探讨了前端框架React Hooks的核心概念及其在现代Web开发中的重要性,分析了Hooks相较于传统class组件的优势所在,展示了它带来的便利和灵活性,为开发者提供了更加高效和优雅的解决方案。
|
2月前
|
前端开发
《深入理解前端框架React Hooks的原理与实践》
本文将深入探讨前端框架React中Hooks的原理及其实际应用,帮助读者更好地理解React Hooks的工作机制,并通过示例代码展示如何利用Hooks来提升前端开发效率和代码质量。
29 0
|
3月前
|
设计模式 前端开发 数据可视化
【第4期】一文了解React UI 组件库
【第4期】一文了解React UI 组件库
78 0