React实现800字符上限textarea字符计数器及const报错解决

你的代码存在两个核心问题：

• 语法层面：const 变量声明、事件绑定这类执行逻辑不能直接放在函数组件的return()括号内。函数组件的return后只能声明要渲染的JSX结构，普通逻辑代码要写在return外层的函数体中，直接塞在return后的括号里会直接触发语法解析错误。
• 实现思路层面：你用的是原生JS直接操作DOM的思路，不符合React的开发范式。React本身会接管DOM的渲染和更新流程，手动调用document.getElementById获取DOM、绑定事件、修改节点内容的写法，很容易因为React还没完成DOM渲染拿到null值，也会出现状态和视图不同步的问题，完全不需要这么实现。

用React受控组件加状态Hook就能极简实现需求，不需要手动操作DOM，代码如下：

import React, { useState } from 'react';

function Counter() {
  // 定义状态存储输入框内容，初始值为空
  const [text, setText] = useState('');

  return (
    <div className="textarea-wrapper">
      <textarea
        id="rezension_textarea"
        value={text}
        onChange={(e) => setText(e.target.value)}
        maxLength={800}
        rows={8}
      />
      <div id="zeichen_counter">
        {text.length}/800
      </div>
    </div>
  );
}

export default Counter;

• 给textarea加原生maxLength={800}属性，就能直接限制用户最多输入800个字符，不需要额外写截断逻辑。
• 通过useState存储输入内容，textarea的onChange事件会在用户输入时触发，同步更新状态值。
• 字符计数直接取状态值的长度即可，React会在状态更新时自动重新渲染视图，计数会实时同步，完全不需要手动修改DOM节点的文本内容。
• 不需要手动绑定input事件，React封装的onChange事件已经覆盖了输入场景的触发逻辑。

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