如何使用React统计textarea中每个字符数量并展示总计数及各字符明细

解决方案 #

你可以新增存储字符频率的状态，在输入触发时同步计算每个字符的出现次数即可，修改后的完整代码如下：

import React, { useState } from "react";

function Home() {
  const [characterCount, setCharacterCount] = useState(0);
  // 新增状态存储每个字符的出现次数
  const [charFrequency, setCharFrequency] = useState({});

  const myFunction = (e) => {
    e.preventDefault();
    console.log("clicked");
  };

  const handleInputChange = (e) => {
    const inputValue = e.target.value;
    // 统计总字符数
    setCharacterCount(inputValue.length);
    // 计算每个字符的出现次数
    const frequencyObj = {};
    for (const char of inputValue) {
      frequencyObj[char] = (frequencyObj[char] || 0) + 1;
    }
    setCharFrequency(frequencyObj);
  };

  return (
    <div>
      <form onSubmit={myFunction}>
        <h3>请输入文本</h3>
        <textarea
          onChange={handleInputChange}
          placeholder="开始输入"
          rows={6}
          cols={40}
        ></textarea>
        <div>
          <button type="submit">提交</button>
        </div>
        <p>总字符数：{characterCount}</p>
        {/* 渲染每个字符的统计结果 */}
        {characterCount > 0 && (
          <div>
            <h4>各字符出现次数：</h4>
            {Object.entries(charFrequency).map(([char, count]) => (
              <p key={char}>{char} = {count}</p>
            ))}
          </div>
        )}
      </form>
    </div>
  );
}

export default Home;

效果说明 #

输入abbbsewrrrrree时，页面会同步输出：

总字符数：14
各字符出现次数：
a = 1
b = 3
s = 1
e = 3
w = 1
r = 5

如果需要忽略大小写、空格或者特殊字符，仅需在统计逻辑中添加对应过滤规则即可。

内容的提问来源于stack exchange，提问作者Notation