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