onClick ne se déclenche pas sur le bouton radio d'entrée React.js

Question

Déplacement des incendies onClick ={props.onPassFail} lorsqu'il est déplacé vers l'emballage <Label> mais ne se déclenche pas lorsqu'il est associé au contrôle <Input>. En fin de compte, je souhaite déclencher l'événement onChange et je ne comprends pas pourquoi Input n'enregistre pas les événements onClick ou onChange. Je suis la convention pour les boutons radio requis par Bootstrap 4.0.0-beta.

Comment puis-je attacher onClick et onChange directement au contrôle <Input>?

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

Vous pouvez ajouter onClick et onChange directement sur le contrôle d'entrée vérifier le code ci-dessous, il fonctionne entièrement

Les gestionnaires de onClick et onChange sont des fonctions ajoutées dans le composant et à l'intérieur de ces fonctions que vous pouvez appeler n'importe quel handler passé comme 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> 
     ); 
    } 
}