onClickはReact.jsの入力ラジオボタンで発砲しません

Question

<Label>に移動するとonClick ={props.onPassFail}が移動しますが、<Input>コントロールに接続しても発火しません。私は最終的にonChangeイベントを発生させたいのですが、InputがonClickイベントまたはonChangeイベントを登録していない理由を理解できません。私は、Bootstrap 4.0.0-betaで必要とされるラジオボタンの規約に従っています。

<Input>コントロールにonClickとonChangeを直接添付するにはどうすればよいですか？

コード：

<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

あなたはそれが完全にonClickとのonChangeの

ハンドラを働いて、以下のコードをチェックし、直接入力制御にonClickとonChangeを追加できる機能をコンポーネントに、これらの内側に追加されますあなたが渡す任意のハンドラを呼び出すことができる関数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> 
     ); 
    } 
}