I have made 4 radio buttons for 1 question. I have made 2 buttons submit and clear input. When I submit the form after clicking on clear input it does not clear the checked buttons to unchecked how can I do that using reset
function ?
contactform.js:
import React, { Component } from 'react'; class ContactForm extends Component { constructor(props){ super(props); this.state = { age:'', gender:'', health:'', name:'', email:'', info:'', fitness:'' }; } setAge(checkedValue){ console.log(checkedValue); this.setState({ age:checkedValue }) } setGender(checkedValue){ console.log(checkedValue); this.setState({ gender:checkedValue }) } onChangeTextBoxGender(event){ this.setState({gender: event.target.value}) } savedata(age, gender, health, name, email, info, fitness){ let newcontent = contentref.push(); newcontent.set({ age:this.state.age, gender:this.state.gender, health:this.state.health, name:this.state.name, email:this.state.email, info:this.state.info, fitness:this.state.fitness }); } reset(){ this.setState({ age:'', gender:'' }) } render() { return ( <div> <div id="center"> <form> <div className="form-group"> <div className="col-sm-offset-2 col-sm-10"> <h3>[Test]Contact us Survey Form</h3> </div> </div> <div id="agegroup" > <div className="form-group"> <div className="col-sm-offset-2 col-sm-10"> <h4>What is your age group?</h4> </div> </div> <div className="form-group"> <div className="col-sm-offset-2 col-sm-10"> <div className="radio"> <label><input type="radio" name="age" onChange={this.setAge.bind(this,'>=25 yrs')}/> >=25 yrs</label> </div> </div> </div> <div className="form-group"> <div className="col-sm-offset-2 col-sm-10"> <div className="radio"> <label><input type="radio" name="age" onChange={this.setAge.bind(this,'26-35 yrs')}/> 26-35 yrs</label> </div> </div> </div> <div className="form-group"> <div className="col-sm-offset-2 col-sm-10"> <div className="radio"> <label><input type="radio" name="age" onChange={this.setAge.bind(this,'36-50 yrs')}/> 36-50 yrs</label> </div> </div> </div> <div className="form-group"> <div className="col-sm-offset-2 col-sm-10"> <div className="radio"> <label><input type="radio" name="age" onChange={this.setAge.bind(this,'>50 yrs')}/> >50 yrs</label> </div> </div> </div> </div> <div id="gender"> <div className="form-group"> <div className="col-sm-offset-2 col-sm-10"> <h4>What is your gender?</h4> </div> </div> <div className="form-group"> <div className="col-sm-offset-2 col-sm-10"> <div className="radio"> <label><input type="radio" name="gender" onChange={this.setGender.bind(this,'Female')}/> Female</label> </div> </div> </div> <div className="form-group"> <div className="col-sm-offset-2 col-sm-10"> <div className="radio"> <label><input type="radio" name="gender" onChange={this.setGender.bind(this,'Male')}/> Male</label> </div> </div> </div> <div className="form-group"> <div className="col-sm-offset-2 col-sm-10"> <div className="radio"> <label><input type="radio" name="gender" onChange={this.setGender.bind(this,'Prefer not to say')}/> Prefer not to say</label> </div> </div> </div> <div className="form-group"> <div className="col-sm-offset-2 col-sm-10"> <div className="radio"> <label><input type="radio" name="gender" onChange={this.setGender.bind(this,-1)}/>Other</label> <input type="text" class="form-inline" id="other1" onChange={this.onChangeTextBoxGender.bind(this)}/> </div> </div> </div> </div> <button type="button" class="btn btn-success" onClick={this.savedata.bind(this)}>Submit</button> <button type="button" class="btn btn-danger">Clear input</button> </form> </div> </div> ); } } export default ContactForm;
See screenshots:
Advertisement
Answer
Give a checked attribute for you radio button. Change
<label> <input type="radio" name="age" onChange={this.setAge.bind(this,'>=25 yrs')} /> {' '} >=25 yrs </label>
to
<label> <input type="radio" name="age" checked={(this.state.age == '>=25 yrs')} onChange={this.setAge.bind(this,'>=25 yrs')}/> >=25 yrs </label>