文字数制限付きのテキストエリア

はじめに

この実験では、React を使って制限付きのテキストエリアコンポーネントを作成します。この実験の目的は、useState()やuseCallback()などの React フックを使って、ユーザーがテキストエリアに入力できる文字数を制限するコンポーネントを作成する際の実践的な経験を提供することです。この実験が終了すると、文字数を表示し、ユーザーが入力できる文字数を制限する機能性のあるテキストエリアコンポーネントが完成します。

文字数制限付きのテキストエリア

VM 内には既にindex.htmlとscript.jsが用意されています。一般的には、script.jsとstyle.cssにのみコードを追加すればよいです。

以下がコードです。

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]
  );

  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!" />
);

このコードでは、以下のことを行っています。

• コメントを簡略化して、コードの各部分が何を行っているかをより簡潔にまとめました。
• 不要なコードコメントを削除しました。
• useCallbackの依存配列からsetContent関数を削除しました。それは必要ないからです。
• useCallback関数内のtext引数の周りに丸括弧を追加して、一貫性を保ちました。
• 簡潔にするために、onChangeイベントハンドラにアロー関数を使用しました。

右下隅の「Go Live」をクリックして、ポート 8080 でウェブサービスを実行してください。その後、Web 8080タブを更新して、ウェブページをプレビューできます。

まとめ

おめでとうございます！文字数制限付きのテキストエリアの実験を完了しました。あなたの技術を向上させるために、LabEx でさらに多くの実験を行って練習してください。