I have checked various forums to resolve this issue, but I could not find an example where the poster had literally copy and pasted from React docs.
I have included a snippet of my code.
When I hover over the checkbox it goes berserk and has seizure (almost like flashing). When I click it, I do not believe onChange fires, because there is no output to the console. The checkbox code was copied and pasted directly from https://reactjs.org/docs/forms.html.
If I manage to click the checkbox during its flashing fit the entire disappears.
Any help will be appreciated. I am hoping this has been ansered elsewhere, I just can't seem to find it.
class LoginPage extends React.Component {
constructor(props) {
super(props);
this.state = {
username: '',
password: '',
submitted: false,
isGoing: true,
};
this.handleInputChange = this.handleInputChange.bind(this);
}
handleInputChange(event) {
console.log("handle input change")
const target = event.target;
const value = target.type === 'checkbox' ? target.checked : target.value;
const name = target.name;
this.setState({
[name]: value
});
}
render() {
return (
<span>
<input
name="isGoing"
type="checkbox"
checked={this.state.isGoing}
onChange={this.handleInputChange}
/>
<label>Checkbox</label>
</span>
);
I don't think this should make a difference, but I am using redux for much of my apps state.
Thanks!
Aucun commentaire:
Enregistrer un commentaire