在 usestate hook 的帮助下使用 reactjs 获取 textarea 字符数

Question

我是 reactjs 的新手，我试图获取 textarea 字符数，需要在用户输入 textarea 时显示，但无法获取计数也抛出状态对象是只读错误。我的代码是

import React from "react";

export default function FullWidthTabs() {
  const [textAreaCount = 0, textAreaTotal = 250] = React.useState(0);

  const recalculate = e => {
    console.log("event value:", e);
    textAreaCount = e.target.value.length;
  };
  return (
    <textarea
      type="text"
      rows={5}
      className="full_height_Width"
      onChange={recalculate}
    />
  );
}

这里预期的输出需要更新字符数，如

Answer 1

import React from "react";
import "./styles.css";

export default function App() {
  const [count, setCount] = React.useState(0);
  return (
    <div>
      <textarea
        type="text"
        rows={5}
        className="full_height_Width"
        onChange={e => setCount(e.target.value.length)}
      />
      <p>{count}</p>
    </div>
  );
}

代码沙盒