Funkeingang onChange wird nur einmal ausgelöst?

Question

Ich habe eine einfache Aufgabe, die ich erreichen möchte: Eine Funktion auslösen, wenn ein Optionsfeld zwischen seiner Gruppe umgeschaltet wird.

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> 
    ) 
} 

Die Schaltfläche und Kontrollkästchen funktionieren einwandfrei. Wenn Sie darauf klicken, wird die Funktion mehrmals ausgelöst. Die Radiobuttons werden einmal ausgelöst und dann gestoppt.

Es ist fast so, als würde ReactJS aus irgendeinem Grund nicht mehr nach onChange für Radioknöpfe Ausschau halten. Jede Hilfe würde sehr geschätzt werden. Vielen Dank!

UPDATE

Es scheint, wie es richtig in https://codesandbox.io/s/rGMGzJNL funktioniert, ist aber nicht richtig in meiner lokalen Umgebung arbeiten, die völlig verwirrende ist. Wird aktualisiert, wenn ich herausfinden, was vor sich geht, aber würde jede Anleitung schätzen, wenn jemand davor schon einmal gestoßen ist!

Answer 1

Sie müssen die geprüfte Eigenschaft für jedes Funkgerät festlegen und den Funkstatus im Status speichern.

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> 
    ); 
    } 
}