on单击未在 React 上触发.js输入单选按钮

Question

移动onClick ={props.onPassFail}在移动到包装<Label>时会触发，但在附加到<Input>控件时不会触发。 我最终想在 onChange 事件上触发，并且不明白为什么输入没有在单击或 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>
        );
    }
}