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

onClick没有触发React.js输入单选按钮

1 个答案: