小道具が偽であっても、チェックボックスはチェックされたままです

Question

私はいくつかの値についてURLをチェックして、チェックボックスをチェック状態にするかどうかを決定しています。これは装飾的なものなのでチェックボックスはクリックできません。

<input 
    type="checkbox" 
    checked={inCurrentFilters({ key: bucket.key, dotField, currentFilters })} 
/> 
{inCurrentFilters({ key: bucket.key, dotField, currentFilters }) ? 'true' : 'false'} 

inCurrentFilters戻りtrueは、チェックボックスをチェックし、それがそれに次のtrueを言うされている場合。その後、falseが返された場合、チェックボックスはチェックされたままで、値はfalseと表示されます。何がありますか？

Answer 1

あなた自身の解決策は、それを解決する最も簡単な方法です。レンダリングするチェックボックスは入力要素なので、デフォルトではユーザーがクリックすることができます。あなたは入力としてそれを使用していないので、pointer-events: noneはそのトリックを行います。

ユーザーエクスペリエンスの観点からは、チェックボックスdisabledを作成するか、見た目が違う2つのアイコンを使用する方が良い場合があります。

デフォルトのチェックボックスを表示することで、チェックボックスをクリックすることができますが、チェックボックスをクリックする必要はありません。

Answer 2

..だから興味深いことに、それはクリック可能だったと私はそれをクリックすることで、機能の状態をオーバーライドました。私はpointerEvents: noneを追加しました。これで問題は解決しますが、より良い方法がありますか？