在 React 中创建一个单词计数器（使用 Hooks）

迷南。 2023-09-27 21:54 3阅读 0赞

创建单词计数器，上代码：

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的长度。最后，将输入框、单词数和字符数显示在页面上。