CODEWITHSUNDEEP
javascriptreactjs
mohan
mohan

Reputation: 457

radio button in react

I want to save the radio button value to a state.

I have a form of a text box and few radio buttons. i want to save the text field and radio button value so that i can render these values in a table.

export class AddColumns extends React.Component{

  constructor(props) {
      super(props);
        this.state={
            newItemInput: '',
            selectedValue: '',
            buyItems :['Development','Testing']
        }
      }

  handleChange(value) {
    this.setState({
          ...state,
          selectedValue: this.state.selectedValue
    });
  };

  change (event){
    this.setState({
      [event.target.name]:event.target.value
    });
    console.log("button clicked",this.state);
  };

 render(){
      return(
        <div className="container">
          <div className="form-group">
              <label className="sr-only" htmlFor="newItemInput">Add New Item</label>
              <input type ="text" ref ={input => this.newColumn = input} name="newItemInput" placeholder="Modules" value = {this.state.newItemInput} className="form-control" 
                      id="newItemInput" onChange={event => this.change(event)}/>
            </div>

            <div className="k-form-field" value={this.state.selectedValue} onChange={this.handleChange}>
              <input type="radio" name="radio" id="radio1" className="k-radio" />
              <label className="k-radio-label">RadioButton 1</label>

              <input type="radio" name="radio" id="radio2" className="k-radio" />
              <label className="k-radio-label">RadioButton 2</label>

              <input type="radio" name="radio" id="radio3" className="k-radio" />
              <label className="k-radio-label">RadioButton 3</label>
            </div>

            <div className="form-group">
              <button type="submit" className="btn btn-primary">Add</button><p>{this.state.messgae}</p>
            </div>
          </div>
);
}

I am not able to get the radio button value, please help

Upvotes: 2

Views: 10927

Answers (2)

RIYAJ KHAN
RIYAJ KHAN

Reputation: 15292

There are some correction.

  1. You are missing form tag wrapping input control
  2. on form submit define event handler which will receive form data.
  3. attach onChange event handler to radio button
  4. attach value attribute to radio button having some value

Your render with above changes:

     render() {
        return (
          <div className="container">
            <form onSubmit={this.handleSubmit} >
            <div className="form-group">
//.....
              <input type="text" ref={input => this.newColumn = input} name="newItemInput" placeholder="Modules" value={this.state.newItemInput} className="form-control"
               //.....
            </div>

            <div className="k-form-field" >
                <input type="radio" name="radio" value="radio1" className="k-radio" onChange={this.handleChange}/>                                        
                                                 type="radio" name="radio" value="radio2" className="k-radio" onChange={this.handleChange}/>
              //.....

              <input type="radio" name="radio" value="radio3" className="k-radio" onChange={this.handleChange}/>
              //.....
            </div>

            <div className="form-group">
              <button type="submit"className="btn btn-primary">Add</button><p>{this.state.messgae}</p>
            </div>
            </form>
          </div>
        );
      }

Handler :

handleSubmit=(event)=>{
    console.log('A form was submitted: ' , this.state); //form data
    event.preventDefault();
    console.log(event);
  }

Radio button handler:

handleChange=(event)=> {
    console.log(event.target.value);
    this.setState({
      ...this.state,
      selectedValue: event.target.value
    });
  };

Working codesandbox

Upvotes: 0

Rodius
Rodius

Reputation: 2311

You have to call onChange on the radiobutton itself instead of the div that wrapps them all.

<input type="radio" name="radio" id="radio1" className="k-radio" onChange={this.handleChange} />

Upvotes: 2

Related Questions