CODEWITHSUNDEEP
javascripthtmlreactjs
user9883888
user9883888

Reputation: 419

OnChange function of input type radio in reactjs?

I am having input tags with radio type

enter image description here 

               <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>

And the onChange function 

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

 }

onChange is getting called only for the first time when i click on second time onChange is not getting called not able to identify what is the problem.

Upvotes: 0

Views: 178

Answers (1)

Arup Rakshit
Arup Rakshit

Reputation: 118261

Add checked props like below:

<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.

Upvotes: 2

Related Questions