CODEWITHSUNDEEP
reactjsradio-button
valli
valli

Reputation: 103

how to get the checked value of a radio button using react

I have below radio button Component

import React from 'react';
import PropTypes from 'prop-types';


export default class RadioButton extends React.Component {
    constructor(props) {
        super(props);
        this.handleChange = this.handleChange.bind(this);
    }
    handleChange = (event) => {
        this.props.handleChange(event);
    }
    render() {
        return (
            <div>           
            <input type="radio" name="measureValue" value={this.props.value} onChange={this.handleChange} checked={true}/>
            <label>{this.props.value}</label>
            </div>

        );
    }
}

Im using this component as 

handleRadioSelect = (event) =>{
        this.setState({
            selectedRadioValue : event.target.value 
         })
    }

<RadioButton value="Fact" handleChange = { this.handleRadioSelect }/>

Now,I got the error as handleChnage is not a function.

Upvotes: 0

Views: 4921

Answers (2)

Limyandi Vico Trico
Limyandi Vico Trico

Reputation: 83

to get value of checked, use the event.target.checked instead of event.target.value, so that:

 handleRadioSelect = (event) =>{
    this.setState({
        radioChecked : event.target.checked
     })
 }

And your error appear because you need to use the arrow function to this.handleCheck (so you can pass in the event props) so that:

onChange={e => this.handleCheck(e)}

In this case, you do not need to bind it anymore and just use normal function for the handleCheck so that:

handleChange(event) {
    this.props.handleChange(event);
}

This is how I normally approach it, hope that helps!

Upvotes: 2

nart
nart

Reputation: 1858

handleChange = (event) => {
   let target = event.target;
   let name = target.name;
   let value = target.type === 'checkbox' ? target.checked : target.value;
   this.setState({
       [name] : value
   })
}

Hope this helps

Upvotes: 0

Related Questions