如何在 React 中创建字数计数器(使用 Hooks)

这篇实用文章向您展示了如何在 React 中创建字数计数器(此外,我们将添加一个字符数计数器,因为它不需要太多努力)。

一些开发人员在计算给定字符串中的单词时会陷入一个常见的陷阱。如果您按照下面的代码片段进行操作,在许多情况下可能会产生不准确的结果:

const text = /* ... */;

// create array of words
const words = text.split(' ');

const wordCount = words.length;

// text = 'abc ' -> wordCount = 2
// text = '' -> wordCount = 1

以下是确定给定字符串中单词数的正确方法:

const text = /* ... */;

// create array of words
const words = text.split(' ');

let wordCount = 0;
words.forEach((word) => {
      if (word.trim() !== '') {
        wordCount++;
      }
});

计算给定字符串中的字符很简单:

const text = /* ... */
const charCount = text.length;

完整示例

应用预览

我们要制作的小演示有一个文本区域。当您在此文本区域中键入一些文本时,将立即显示单词数和字符数(包括空格):

如何在 React 中创建字数计数器(使用 Hooks)

代码

  1. 为了确保我们有相同的起点,让我们初始化一个全新的 React 项目:
npx create-react-app kindacode-example

2. App.js中的完整代码(附解释):

// KindaCode.com
// src/App.js
import { useState, useEffect } from 'react';
import './App.css';

function App() {
  // the text entered by the user
  const [text, setText] = useState('');

  // word count
  const [wordCount, setWordCount] = useState(0);

  // character count
  const [charCount, setCharCount] = useState(0);

  const changeHandler = (event) => {
    setText(event.target.value);
  };

  useEffect(() => {
    // array of words
    const words = text.split(' ');

    // update word count
    let wordCount = 0;
    words.forEach((word) => {
      if (word.trim() !== '') {
        wordCount++;
      }
    });
    setWordCount(wordCount);

    // update char count (including whitespaces)
    setCharCount(text.length);
  }, [text]);

  return (
    <div className='container'>
      <h2>KindaCode.com</h2>
      <div>
        <textarea
          value={text}
          onChange={changeHandler}
          placeholder='What is on your mind?'
        ></textarea>

        <div>
          <p className='word-count'>Word Count: {wordCount}</p>
          <p className='char-count'>
            Character Count (Including Whitespaces): {charCount}
          </p>
        </div>
      </div>
    </div>
  );
}

export default App;

3. 这是App.css中的所有 CSS 代码:

.container {
    width: 80%;
    margin: 50px auto;
}

textarea {
    width: 400px;
    height: 100px;
    background: #eee;
    padding: 10px;
    border-radius: 10px;
}

.word-count {
    color: blue;
    font-weight: bold;
}

.char-count {
    color: red;
    font-weight: bold;
}

4.以开发模式运行项目:

npm start

并转到 http://localhost:3000 检查您的工作。

结论

我们已经使用useStateuseEffect钩子实现了单词计数器和字符计数器。我希望你喜欢这个例子。尝试修改代码,改变一些东西,看看会发生什么。

免责声明:
1.本站所有内容由本站原创、网络转载、消息撰写、网友投稿等几部分组成。
2.本站原创文字内容若未经特别声明,则遵循协议CC3.0共享协议,转载请务必注明原文链接。
3.本站部分来源于网络转载的文章信息是出于传递更多信息之目的,不意味着赞同其观点。
4.本站所有源码与软件均为原作者提供,仅供学习和研究使用。
5.如您对本网站的相关版权有任何异议,或者认为侵犯了您的合法权益,请及时通知我们处理。
火焰兔 » 如何在 React 中创建字数计数器(使用 Hooks)