export const Tag: React.FC<Props> = ({ options }: Props) => {
// (中略)
const customStyles: StylesConfig<StyleOption> = {
// (中略)
return {
...styles,
backgroundColor:
// [1] この要素にdisabled属性が付いているか否か (true or false)
isDisabled
// [2] TRUE (要素にdisabled属性が付いている場合)
? undefined
// [3] FALSE (要素にdisabled属性が付いていない場合)
: isSelected
? primaryColor
: // hover時の背景色
isFocused
? hoverBackgroundColor
: undefined,
// (中略)
}
export const Tag: React.FC<Props> = ({ options }: Props) => {
// (中略)
const customStyles: StylesConfig<StyleOption> = {
// (中略)
return {
...styles,
backgroundColor:
// [1] この要素にdisabled属性が付いているか否か (true or false)
if ( isDisabled ) {
// [2] TRUE (要素にdisabled属性が付いている場合)
? undefined
// [3] FALSE (要素にdisabled属性が付いていない場合)
// (要素にselected属性が付いているか否か)(true or false)
} else if (isSelected) {
// [4] TRUE (要素にselected属性が付いている場合)
? primaryColor
// [5] FALSE (要素にdisabled属性が付いていない場合)
// (要素にselected属性が付いていない場合)
// (要素にfocused属性が付いているか否か)(true or false)
: // hover時の背景色
} else if ( isFocused ) {
//
? hoverBackgroundColor
} else {
: undefined,
}
// (中略)
}
disabled 属性
真偽値属性で、ユーザーがそのコントロールを利用することができないことを示します。
もしこの属性が指定されていない場合、コントロールはその設定を親要素、例えば<fieldset>要素から継承します。
もし親要素に disabled 属性を持つものがなければ、そのコントロールは利用可能です。
selected 属性
<option> 要素は、選択肢が選択されたときにサーバーに送信するデータの値を含む value 属性を持ちます。
value 属性が含まれない場合、既定で要素の中に含まれるテキストの値が使用されます。
<option> 要素に selected 属性を付けることで、ページが最初に読み込まれたときに既定で選択状態にすることができます。
focused
ユーザがクリックするか、キーボードで Tab キーを使うとき、要素はフォーカスを受け取ります。
また、ページが読み込まれたとき、デフォルトで要素にフォーカスを与える autofocus HTML属性もあり、フォーカスを取得するための別の手段です。
フォーカスは、たいてい “ここでデータを受け入れる準備をする” ことを意味します。
つまり、コードを実行して初期化したり何かをロードすることができる瞬間です。
フォーカスを失う瞬間(“blur”)はより重要になります。
それは、ユーザが他の場所をクリックしたり、Tab を押して次のフォームフィールドに移動したり、同様に他の手段もあります。
フォーカスを失うということは、通常 “データが入力された” ことを意味します。
そのため、それをチェックしたり、サーバに保存したりするコードを実行することができます。
フォーカスイベントを扱う際には重要な特性があります。ここではそれを説明するためにベストを尽くします。
