Právě jsem našel zatoulaný event.preventDefault() to rvalo políčka' onChange handler:
import { Component } from 'react';
class App extends Component {
constructor(props) {
super(props)
this.state = {
accepted: false
}
}
changeChecked = (event) => {
this.setState((state) => ({
accepted : !state.accepted
}));
event.preventDefault(); // <- this very bad
}
render() {
return (
<input
type="checkbox"
onChange={this.changeChecked}
checked={this.state.accepted}
/>
);
}
}
export default App;
Výsledné chování je správně aktualizován stav na první kliknutí, ale políčko pouze změny v jeho "kontrolovat" vzhled na příští překreslil, např. druhé kliknutí.
Proč je, že? Není to bod kontrolované součásti pracovat nezávisle na prohlížeči událostí?
Někdo vysvětloval mi to bude určitě zmírnit bolest hodin strávených vařením dolů můj složitý případ použití. Děkuji!!!
Aktualizace: Zde je rychlý Codepen příklad prokazující zvláštní chování.
Jsem součástí 'unprevented políčko' a jeden s zabráněno onClick událost jako srovnání.
Všimněte si, jak ten se brání onChange přepne svůj vzhled k jeho aktuálního stavu, jakmile jsem klepněte na jiné políčko.
checkedatribut pouze popisuje výchozí stav o načítání stránky je dobré vést. Pořád nemůžu zabalit hlavu kolem skutečného chování (aktualizace vzhled na druhé kliknutí - viz můj Codepen příklad výše), ale myslím, že důvody pro to jsou pohřbeny hluboko v propojení reagovat a prohlížeč událostí. Možná kámen lepší vlevo na kameni. ;)