Checkbox bleibt geprüft, obwohl Prop falsch ist

Question

Ich überprüfe die URL für einen Wert und dann, ob das Kontrollkästchen in einem aktivierten Zustand sein soll oder nicht .. Dies ist nur dekorativ, das Kontrollkästchen ist nicht anklickbar.

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

Wenn inCurrentFilters kehrt true das Kontrollkästchen aktiviert ist, und es sagt true daneben. Dann, wenn es false zurückgibt, bleibt das Kontrollkästchen aktiviert und der Wert lautet false. Was gibt?

Answer 1

Ihre eigene Lösung ist der einfachste Weg, um es zu lösen. Das Kontrollkästchen, das Sie rendern, ist ein Eingabeelement. Standardmäßig können Benutzer darauf klicken. Da Sie es nicht als Eingabe verwenden, macht pointer-events: none den Trick.

Aus einer User Experience Perspektive kann es besser sein, das Kontrollkästchen disabled, oder verwenden Sie 2 Symbole, die anders aussehen.

Durch das Anzeigen von Standard-Kontrollkästchen teilen Sie den Benutzern im Wesentlichen mit, dass sie auf das Kontrollkästchen klicken können, was sie nicht tun sollten.

Answer 2

So .. Interessanterweise war es anklickbar und ich war das Überschreiben des Funktionszustandes indem Sie darauf klicken. Ich fügte pointerEvents: none hinzu. Dies behebt das Problem, aber gibt es einen besseren Weg?