onClick feuert nicht auf React.js-Eingabe-Optionsfeld

Question

Das Verschieben des onClick ={props.onPassFail} wird ausgelöst, wenn es in die Verpackung <Label> verschoben wird, aber nicht ausgelöst, wenn es an die <Input>-Steuerung angeschlossen ist. Ich möchte schließlich onChange-Ereignis auslösen und verstehe nicht, warum Input Ereignisse onClick oder onChange nicht registriert. Ich befolge die Konvention für Radio Buttons, die von Bootstrap 4.0.0-beta benötigt werden.

Wie kann ich onClick und onChange direkt an die <Input> Steuerung anschließen?

Code:

<div className="btn-group" data-toggle="buttons"> 
    <label className="btn btn-secondary passfail passfail-fail" onClick={props.onPassFail}> 
    <input type="radio" name="passfail" id="option1" autoComplete="off" /> Fail 
    </label> 
    <label className="btn btn-secondary passfail passfail-pass" onClick={props.onPassFail}> 
    <input type="radio" name="passfail" id="option2" autoComplete="off" /> Pass 
    </label> 
</div> 

Answer 1

können Sie fügen onClick und onChange direkt am Eingangssteuer den Code überprüfen, es voll

Arbeits ist

die Handler von onClick und onChange sind Funktionen der Komponente hinzugefügt und innerhalb dieser Funktionen, die Sie anrufen können alle Handler übergeben als props

export default class Test extends Component { 
    constructor(props) { 
     super(props); 
     this.clicked = this.clicked.bind(this); 
     this.changed = this.changed.bind(this); 
    } 

    clicked(){ 
     console.log("clicked"); 
     //this.props.onPassFail(); 
    } 

    changed(){ 
     console.log("changed"); 
     //this.props.onPassFail(); 
    } 

    render() { 
     const { handleSubmit , error } = this.props 
     return (
      <label> 
       <input type="radio" onClick={this.clicked} onChange={this.changed} /> 
      </label> 
     ); 
    } 
}