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