onClick不觸發React.js輸入單選按鈕

Question

將onClick ={props.onPassFail}移動到包裝<Label>時觸發，但在連接到<Input>控件時不觸發。我最終想要觸發onChange事件，並不明白爲什麼Input沒有註冊onClick或onChange事件。我遵循Bootstrap 4.0.0-beta要求的單選按鈕約定。

如何將onClick和onChange直接連接到<Input>控件？

代碼：

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