如何在反应中创建字符计数器？答案

【问题标题】：How to create a character counter in react?如何在反应中创建字符计数器？
【发布时间】：2022-07-05 17:00:03
【问题描述】：

我是新人，第一次用 react 创造一些东西。我想在文本区域中创建一个字符计数器以做出反应。计数器的最大长度应为 800 个字符。我创建了这段代码，但我不知道如何包含 const 而不会收到错误消息。

import React from 'react'
import { Component } from 'react';

function Counter() {
    return (
      
const rezensionTextArea = document.getElementById('rezension_textarea');
        const zeichenCounter = document.getElementById('zeichen_counter');

rezensionTextArea.addEventListener('input', () => {
         const zeichen = rezensionTextArea.value.length;
         zeichenCounter.textContent = `${zeichen}/800`;
        });
    )
}

export default Counter

【问题讨论】：

在使用 React 时通常不使用document.getElementById。您改为使用状态或参考。检查这个：stackoverflow.com/questions/59835355/…

标签： javascript reactjs constants charactercount

【解决方案1】：

欢迎回复 :) 这不是它应该的样子，如果你想创建一个带有计数器的组件，它应该是这样的：

function Counter() {
const [count, setCount] = useState(0);

return (
    <div>
        {/*This will increment count by 1*/}
        <input type={"button"} value={"Click me"} onClick={() => setCount(count + 1)} />
        {/*This will decrement the count by 1*/}
        <input type={"button"} value={"Click me"} onClick={() => setCount(count - 1)} />
        {/*This will display the count*/}
        {count}
    </div>


)}

随它去玩，但这是你在 React 中更新 dom 的方式

【讨论】：