4
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 1 year has passed since last update.

React: Chakra UIのButtonを操作できなくするプロパティはdisabledではなくisDisabled

Posted at

使い始めたChakra UIについて、プロパティの扱いでつまずいたため、情報を共有します。

Buttonコンポーネントを操作できなくするプロパティはisDisabled

Chakra UIのButtonコンポーネントを操作できなくするために用いるプロパティはisDisabledです。HTMLの標準プロパティdisabledは使えません。

TypeScriptを備えた環境でも、disabledButtonコンポーネントの型として通ってしまうのが悩ましいところです(「disabled prop does not work for Button and Radio despite the type allowing it」参照)。公式ドキュメントに、disabledがダメという情報は、探した範囲では見当たりません。

カスタムボタンならdisabledが使える

辛うじて公式ドキュメント「Button」の「Custom Button」の項には、カスタムボタンならdisabledプロパティは定められるという説明があります。ただし、コンポーネントはBoxを用い、asプロパティでDOM要素buttonに設定したうえで(as="button")1、スタイルは細かく決めなければなりません(「Custom Button」参照)。

なお、disabledtrueのときのスタイルは、_disabledプロパティに定めてください。

<Box
	as='button'

	_disabled={{ bg: 'lightgray' }}
	disabled={true}
>

というより、Buttonコンポーネントにdisabledはプロパティとして使えないということを、まずドキュメントに明記してほしかったです。

CheckboxがチェックされているかはisCheckedプロパティ

筆者は、チェックボックスがチェックされていなかったら、ボタンは押せないという動作を書いていました。このときまた、Checkboxコンポーネントに用いるプロパティはcheckedではありません。isCheckedです。

boolean(論理値)型のプロパティには接頭辞isを付するという命名規則は、明確だといえるかもしれません。ただ、標準HTMLと異なる点については、もう少し説明がほしいでしょう。

  1. Boxコンポーネントは、デフォルトでは<div>要素として描画されますasはこれを他のDOM要素、ここでは<button>に切り替えるプロパティです。

4
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
4
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?