🐕‍🦺

Material-uiでボタンを動的にdisabledにする

2021/03/07に公開

通常のdisable

<Button disabled onClick={deleteSomething}>削除</Button>

これで灰色で押せないボタンとなる。
だが、例えばログイン済みでないと押せないボタンなど、動的にdisableかそうでないか決めたい時がある。

動的にdisabled

<Button disabled={!isAuthenticated} onClick={deleteSomething}>削除</Button>

isAuthenticatedはサインインしているかどうかのbooleanが入る。
これでisAuthenticatedがfalseの時、disableとなり押せないボタンとなる。
またこれは以下のように比較式を入れることもできる。

<Button disabled={checkList.length==0} onClick={deleteSomething}>削除</Button>

上記はチェックしたものの個数(checkList.length)が0だと押せないボタンの例。

公式にはなかったため見返すようにまとめました。
お読みいただきありがとうございます。

Discussion