vendredi 9 novembre 2018

React checkbox will not work, onChange does not fire

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