React TS - textarea 的最大字符数限制

Question

所以我有 2 个问题。我创建了一个 textarea 组件，该组件还将跟踪用户在 textarea 中输入了多少字符。

问题 1： 我正在尝试查看用户输入的当前输入长度是否大于或等于（>=）我的maxLength prop if (value.length >= maxLength)，但我收到此错误：

var maxLength: number | undefined
Object is possibly 'undefined'.ts(2532)

谁能解释我为什么会得到这个？

问题 2： 目前，当您在 textarea 中键入单个字符时，字符限制将保持在 0，并且仅在键入第二个字符后才会开始增加。此外，如果您在 textatea 中键入一些文本然后删除它，它会说字符限制是 1/X，而它应该是 0/X。我该如何解决这个问题？

代码：

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

interface ITextarea {
  maxLength?: number;
}

const Textarea: React.FC<ITextarea> = ({ maxLength }) => {
  const [value, setValue] = React.useState("");
  const [charLimit, setCharLimit] = React.useState(`0 / ${maxLength}`);

  const handleCharLimit = () => {
    if (value.length >= maxLength) {
      setCharLimit("You have reached the maximum number of characters!");
    } else {
      setCharLimit(`${value.length} / ${maxLength}`);
    }
  };

  return (
    <>
      <textarea
        value={value}
        onChange={event => {
          setValue(event.target.value);
          handleCharLimit();
        }}
        maxLength={maxLength}
      />
      {maxLength && <span>{charLimit}</span>}
    </>
  );
};

export default function App() {
  return (
    <div className="App">
      <Textarea maxLength={50} />
    </div>
  );
}

这是一个CodeSandBox，感谢分叉 :)

Answer 1

1. 对象可能是'未定义'.ts(2532)

ITextarea 将maxLength 定义为可选参数。如果你不为它传递一个值，它的值将是未定义的。

1. 发生这种情况是因为 React 状态更新不是立即的，它们发生在下一次渲染过程中。您正在调用handleCharLimit，但是当您调用它时，value 实际上还没有更新，即使它是在setValue 之后调用的。您应该使用useEffect 或useMemo 来更新您的charLimit 以响应value 的变化。

在此处查看更新版本：https://codesandbox.io/s/hungry-fermi-bsmny