I have a simple task I'm trying to accomplish: Fire a function whenever a radio button is toggled between its group.

class App extends Component {
    onButtonClick() {
        console.log('something was clicked!')
    }

    return (
      <div>
        <button onClick={this.onButtonClick.bind(this)}>
            Click me
        </button>
        <input
            type="checkbox"
            onChange={this.onButtonClick.bind(this)}
        />
        <input
            type="radio"
            value="yes"
            name="answer"
            onChange={this.onButtonClick.bind(this)}
        />
        <input
            type="radio"
            value="no"
            name="answer"
            onChange={this.onButtonClick.bind(this)}
        />
      </div>
    )
}

The button and checkbox work just fine. If you click on it, it fires the function multiple times. The radio buttons fire once and then stop.

It's almost as if ReactJS stops watching for the onChange for radio buttons for some reason. Any help would be greatly appreciated. Thank you!

UPDATE

It seems like it works properly in , but is not working properly in my local environment which is utterly perplexing. Will update if I figure out what is going on, but would appreciate any guidance if anyone has run into this before!

I have a simple task I'm trying to accomplish: Fire a function whenever a radio button is toggled between its group.

class App extends Component {
    onButtonClick() {
        console.log('something was clicked!')
    }

    return (
      <div>
        <button onClick={this.onButtonClick.bind(this)}>
            Click me
        </button>
        <input
            type="checkbox"
            onChange={this.onButtonClick.bind(this)}
        />
        <input
            type="radio"
            value="yes"
            name="answer"
            onChange={this.onButtonClick.bind(this)}
        />
        <input
            type="radio"
            value="no"
            name="answer"
            onChange={this.onButtonClick.bind(this)}
        />
      </div>
    )
}

The button and checkbox work just fine. If you click on it, it fires the function multiple times. The radio buttons fire once and then stop.

It's almost as if ReactJS stops watching for the onChange for radio buttons for some reason. Any help would be greatly appreciated. Thank you!

UPDATE

It seems like it works properly in https://codesandbox.io/s/rGMGzJNL, but is not working properly in my local environment which is utterly perplexing. Will update if I figure out what is going on, but would appreciate any guidance if anyone has run into this before!

• javascript
• reactjs

• Try to move your handler binding into constructor this.handleWeddingRsvp.bind(this) – Umesh Commented Aug 2, 2017 at 3:00
• Doesn't change anything unfortunately. Let me simply my example to help illustrate the issue. – bencodezen Commented Aug 2, 2017 at 3:06
• 2 Try using onclick as your event - in native JS you can't use onchange stackoverflow.com/questions/8838648/… – toastrackengima Commented Aug 2, 2017 at 3:13
• Your JSX (return) should only return 1 node, which might be causing an issue. Maybe wrap all of it in a div – Sonny Commented Aug 2, 2017 at 3:25

1 Answer 1

You need to set checked property on each radio and save radio status in state.

class App extends Component {
  state = {
    radio: 'yes',
  }

  onButtonClick() {
    console.log("something was clicked!");
  }

  onRadioChange(value) {
    console.log("radio change");
    this.setState({
      radio: value,
    })
  }

  render() {
    return (
      <div>
        <button onClick={() => this.onButtonClick()}>
          Click me
        </button>
        <input type="checkbox" onClick={() => this.onButtonClick()} />
        <input
          type="radio"
          value="yes"
          name="answer"
          checked={this.state.radio === 'yes'}
          onChange={(e) => this.onRadioChange('yes')}
        />
        <input
          type="radio"
          value="no"
          name="answer"
          checked={this.state.radio === 'no'}
          onChange={(e) => this.onRadioChange('no')}
        />
      </div>
    );
  }
}