Reactでtextareaの入力文字数を制限したい

Question

前提・実現したいこと

textareaの文字数をカウントするコンポーネントを作成しています
↓
デモ

textareaの文字数が10文字を超えたら、文字数のカウントしないのと、文字の入力を受け付けないようにしたいです。
10文字を超えない場合は、自由に増減できるようにしたいです。
また、改行はカウントしないようにしたいです。

発生している問題・エラーメッセージ

10文字を超えても入力ができます。

該当のソースコード

const [length, setLengh] = useState(0);
const checkTextArea = (e) =>
  setLengh(e.target.value.replace(/\n/g, "").length);

return (
  <>
    <p>現在{length < 10 ? length : 10}文字 / 最大10文字</p>
    <textarea onChange={checkTextArea}></textarea>
  </>
);

試したこと

textareaにmaxlength属性を設定することで入力制限ができましたが、改行が文字数にカウントされます。

また、下記のようにsetStateを文字数ではなく文字そのものにして、10文字を超えたらsetStateしない、というコードにしてみました。

const [text, setText] = useState(0);
const checkTextArea = (e) => {
  if(text.replace(/\n/g, "").length > 10) return;
  setText(e.target.value);
}

return (
  <>
    <p>現在{text.replace(/\n/g, "").length}文字 / 最大10文字</p>
    <textarea onChange={checkTextArea} value={text}></textarea>
  </>
);

これで10文字になったら入力ができなくなり、かつ文字数のカウントも10文字で止まりました。
しかし、10文字になったらsetStateできなくなるため、文字数を減らすことができなくなりました。
textareaのvalue属性を取り除けば、10文字になっても文字数を減らすことができますが、代わりに11文字以上を入力できてしまいます。

また、10文字を超えたらdisabled属性をtrueにするように書いてみたものの、10文字を超えるとdisabledがtrueになることで文字の入力ができなくなり、文字を減らすことができなくなりました。

Answer 1

const checkTextArea = (e) => {
  if(text.replace(/\n/g, "").length > 10) return;
  setText(e.target.value);
}

で現在の text についてチェックしていしまっているので

const checkTextArea = (e) => {
  const newText = e.target.value.replace(/\n/g, "")
  if (newText.length > 10) return;
  setText(newText);
}

と変えるのはどうでしょうか？

Answer 2

実装より前に、どのような動作がユーザーにとって使いやすいか考える必要があります。

• 郵便番号のように、「何文字打てばいいのかが明らか」な入力フォームについては、maxlengthなど「指定文字を超えれば強制的に打てなくなる」形でそう問題はありません。
• 一方、一般のフリー入力の場合は、「入力したものが強制的に消される」のが不便になる場合がありうるので、「入力フォーム自体には文字数制限を適用せず、送信ボタンを無効化してユーザーに対応させる」という作り方のほうがいい場合もありえます。

（「<textarea>なのに上限10文字」というシチュエーションがわからないので、一般的なコメントとなっています）

Comments

[maisumakun]

技術的な面について言えば、Reactからフォームの中身を制御したい場合、「stateに入力内容を持たせる」のほぼ1択です。