带字符限制的文本框

渲染一个带有字符限制的文本框组件。

• 使用 useState() 钩子创建 content 状态变量。将其值设置为 value 属性的值，截取到 limit 个字符。
• 创建一个名为 setFormattedContent 的方法，它将内容截取到 limit 个字符，并使用 useCallback() 钩子进行记忆化。
• 将 <textarea> 的 onChange 事件绑定到调用 setFormattedContent 方法，并传入触发事件的值。

const LimitedTextarea = ({ rows, cols, value, limit }) => {
  const [content, setContent] = React.useState(value.slice(0, limit));

  const setFormattedContent = React.useCallback(
    text => {
      setContent(text.slice(0, limit));
    },
    [limit, setContent]
  );

  return (
    <>
      <textarea
        rows={rows}
        cols={cols}
        onChange={event => setFormattedContent(event.target.value)}
        value={content}
      />
      <p>
        {content.length}/{limit}
      </p>
    </>
  );
};

ReactDOM.createRoot(document.getElementById('root')).render(
  <LimitedTextarea limit={32} value="Hello!" />
);