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