移动onClick ={props.onPassFail}
移动到 wrapper 时触发 <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>
最佳答案
您可以直接在输入控件上添加 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>
);
}
}
关于reactjs - onClick 未在 React.js 输入单选按钮上触发,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/46658336/