@yoshikazu0110 (h y)posted at 2022-09-06

typescript matelial ui select 選択値ブランクが "" と比較できない。

Q&A

Closed

解決したいこと

React matelial ui の select コンポートンとを使って
セレクトボックスの選択値を取得します。
その時に選択値ブランクが "" と比較できない問題を解決したいです。

セレクトボックス選択値の場合は以下の処理を通過させたいのですがなぜか通過しません。

var deleteSelectItem = document.getElementsByClassName('delete-user-select') as HTMLCollection | null;
var deleteSelect = deleteSelectItem![0]?.firstChild?.textContent as string | "";

if(deleteSelect == ""){
    errorMsg = "削除ユーザーを選択してください。";
    setErrorMsg(errorMsg);
    setError(true);
    return;
}

開発者モードで値を確認しても以下のようになっていたのですがif分岐の中を通過してくれませんでした。

deleteSelect = ""

いったいなぜこのような現象が起こるのでしょうか？

4Answer

@nomari4598 posted at 2022-09-08

厳密等価演算子（"==="）で比較されてはいかがでしょうか？

if(deleteSelect === ""){
    errorMsg = "削除ユーザーを選択してください。";
    setErrorMsg(errorMsg);
    setError(true);
    return;
}

1Like

Comments

@yoshikazu0110
Questioner
ありがとうございます！
厳密等価比較も試してみましたが
分岐の中は通りませんでした🤔

@largetownsky posted at 2022-09-10

表示されない文字が混ざっていたりしませんか？

開発者モードで、「typeof deleteSelect」がstringであることと、「deleteSelect.length」が0であることを確認してみたらどうでしょうか？

1Like

@d4413 posted at 2022-09-10

HTMLCollection | nullやstring | ""で、論理OR || ではなくビットOR |を使っているからだと思います。

1Like

Comments

@yoshikazu0110
Questioner
論理ORでもだめでした
セレクト区の中にspan入っててselectのInnertextを""と比較していたのが悪かったみたいですね。ただinnerttextはconsole.logとかで表示しても""だったので不思議ですね。
<select><span></span></select>

@yoshikazu0110 posted at 2022-09-09

ダミーのselect作って、選択値なしのものと比較すると、分岐は通るんですよね

0Like

Are you sure you want to delete the question?

typescript matelial ui select 選択値ブランクが "" と比較できない。

解決したいこと

4Answer

Comments

Comments

Your answer might help someone💌