javascript - ReactJS中输入类型radio的OnChange函数？

Question

我有带有单选类型的输入标签

               <div className="col-md-12">
                    <div className="form-group clearfix">
                      <label htmlFor="" className="col-md-2 control-label">Authentication</label>
                      <div className="col-md-8">

                        <input type="radio"  name="authentication" value="No Authentication" onChange={this.Authentication.bind(this)} />
                        No Authentication


                      <input type="radio"  name="authentication" value="Master Credentials" onChange={this.Authentication.bind(this)} />
                      Master Credentials


                      </div>
                    </div>
                  </div>

以及onChange函数

Authentication(e) {
this.setState({ authentication: e.target.value });

 }

仅当我第二次单击 onChange 时第一次被调用，onChange 未被调用，无法确定问题所在。

Answer 1

添加 checked 属性，如下所示:

<div className="col-md-12">
  <div className="form-group clearfix">
    <label htmlFor="" className="col-md-2 control-label">
      Authentication
    </label>
    <div className="col-md-8">
      <input
        type="radio"
        name="authentication"
        value="No Authentication"
        checked={this.state.authentication === "No Authentication"}
        onChange={this.Authentication.bind(this)}
      />
      No Authentication
      <input
        type="radio"
        name="authentication"
        value="Master Credentials"
        onChange={this.Authentication.bind(this)}
        checked={this.state.authentication === "Master Credentials"}
      />
      Master Credentials
    </div>
  </div>
</div>;

Demo code .