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