【React.js】用意したすべてのフォームに有効な値が入力されたら、送信ボタンのdisabledを解除したい。

Question

前提・実現したいこと

Reactで作成しているアプリにお問い合わせフォームを設けています。
下記がサンプルです。
サンプル

送信ボタンはデフォルトでdisabled状態です。
用意したすべてのフォームに有効な値が入力されたら、送信ボタンのdisabledを解除し、送信ボタンを押せるようにしたいです。

該当のソースコード

import React, { useState } from "react";

export default function App() {
  const [forms, setForms] = useState([false, false, false]);
  console.log(forms);

  const checkName = e => {
    if (e.target.value === "") {
      setForms((forms[0] = false));
      console.log(forms);
      return;
    }
    setForms((forms[0] = true));
    console.log(forms);
  };
  const checkMail = e => {
    if (e.target.value === "") {
      setForms((forms[1] = false));
      return;
    }
    setForms((forms[1] = true));
  };
  const checkMessage = e => {
    if (e.target.value === "") {
      setForms((forms[2] = false));
      return;
    }
    setForms((forms[2] = true));
  };

  const send = () => {
    alert("送信しました。");
  };

  return (
    <form>
      <p>
        お名前
        <input type="text" onChange={checkName} />
      </p>
      <p>
        メールアドレス
        <input type="email" onChange={checkMail} />
      </p>
      <p>
        お問い合わせ内容
        <input type="text" onChange={checkMessage} />
      </p>
      <button onClick={send} disabled={forms !== [true, true, true]}>
        送信
      </button>
    </form>
  );
}

発生している問題

すべてのフォームに値を入力しても、送信ボタンのdisabledの解除ができていません。

送信ボタンの状態を下記のようにstateで管理しており、

const [forms, setForms] = useState([false, false, false]);

formsが[true,true,true]になったら、送信ボタンのdisabledを解除するようにしています。

<button onClick={send} disabled={forms !== [true, true, true]}>

---

setStateは各種フォームにonChangeイベントを用意し、「入力値があるか無いか」を条件に、booleanをforms配列に代入しています。

しかし、試しにお名前フォームに値を入力すると、

[true, false, false]
true

が一度にコンソールに表示されます。

※コンソールの一番上の[false,false,false]はAppコンポーネント描画時に表示されるものです。
以降のonChangeイベントによるコンソールの結果は、配列ではなくbooleanのみです。
また、メールとお問い合わせ内容フォームに入力時のコンソールの結果は、初回からbooleanのみです。

---

私の用意したサンプルはonChangeイベントのたびにsetStateにより再レンダリングされているので、パフォーマンス性的に良くないかと存じます。
よりパフォーマンス性に優れ、よりシンプルに実装できる方法がありましたら、ご教示いただけますと幸いです。
「実現したいこと」が実現できればよいので、最初に提示したサンプルの目指す実装方法にこだわるつもりはありません。

Answer 1

以下のように修正してみるといかがでしょう？

修正前

<button onClick={send} disabled={forms !== [true, true, true]}>

修正後

<button onClick={send} disabled={forms.some(ok => !ok)}>

追記

配列formsの先頭要素を false に変更するようにsetFormsしている行が、

修正前

setForms((forms[0] = false));

となっていますが、これだと、setForms が実行された後の、次の forms の値が false になってしまい、配列にならなくなってしまい、そのために

"TypeError forms.some is not a function"というエラーメッセージが表示されました。

ということになります。setForms に与える引数は、３個のboolean値を要素とする配列を渡す必要があります。ですので、上記を以下のように修正します。

修正後

setForms([ false, forms[1], forms[2] ]);

上記を含めて、setForms((forms[i] = true or false)); という書き方をしている行は、全部で６箇所ありますが、上記の他の５箇所についても（全く同じ、ではなく）同様の修正をする必要があります。

Comments

[TofuLove]

ご回答いただきありがとうございます。修正後コードをコピペしお名前フォームに値を入力したところ、"TypeError forms.some is not a function"というエラーメッセージが表示されました。修正後コードのみをコピペしたため、修正後コードを適用するにあたりほかに必要な修正箇所がありましたらご連絡いただけますと幸いです。

[jun68ykt]

setForms　している行が６箇所ありますが、それらを修正する必要があります。どのような修正をすればよいかを追記しました。参考になれば幸いです。

[TofuLove]

おかげさまで実現したいことが実装できました！ありがとうございました。setStateについては配列そのものをセットする必要があったわけですね。また、array.some()については存じていなかったのですが、この機会に知ることができ大変勉強になりました。修正後コードで言えば配列にひとつでもfalseがあればtrueを返す（disabled=true;）ということでしょうか。重ねてにはなりますがありがとうございました。

[jun68ykt]

どういたしまして。
> 配列にひとつでもfalseがあればtrueを返す
はい。そのとおりです。
some と合わせて覚えておかれるとよいのは
every
です。以下、参考まで。

JavaScriptのsomeとeveryがすごく便利(@i_am_master_yodaさん)
https://qiita.com/i_am_master_yoda/items/224ff73443b4566ec8e8

https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Array/every

https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Array/some