Hello I am using class component in react JS. In this I am using radio button on submit how we check radio button is checked not. If check store their value in redux and local storage .How can we implement this in react JS. Below I am sharing my code.Please check my where I am doing wrong?

import React, {Component} from 'react';
import Header from '../Header';
import {connect} from 'react-redux';


class Step5 extends Component {

    constructor(){
        super()
        this.state = {estimated:'1-2'}
        this.handleChange  = this.handleChange.bind(this);
        this.handleSubmit  = this.handleSubmit.bind(this);
    }
    handleChange(event) {
        const { estimated, value } = event.target;
        console.log('JJF',event.target.value)
        this.setState({
            selectedOption: event.target.value
        });
      };
      handleSubmit = (e) => {
        e.preventDefault();
         var step5  =  this.state.estimated;
        
         console.log('estimated', JSON.stringify(step5))
         console.log('step5',step5);
         localStorage.setItem('step5', step5);
        const data = {
           id: new Date(),
           step5:step5
        }
        
        this.props.dispatch({type:'ADD_STEP5',data});
        window.open("/Step6" , "_self");  
     }

      
    render(){
        const {value} =this.state;
        return(  
            <div>
            <Header />           
              <section className="planing_outer">
                <form onSubmit={this.handleSubmit}>
                    <h1>{value} fff</h1>
                    <div className="container">
                        <div className="inner_heading">
                            <h4>How big is your event?</h4>
                        </div>   
                        <div className="row">  
                    <div className="col-lg-8 offset-lg-2">
                        <div className="text_outer"># of Estimated Attendees</div>
                        <div className="row">
                        <div className="col-lg-4 col-md-4">
                            <div className="even_box1">
                            <input type="radio" className="ischeck" id="flexCheckDefault" checked={this.state.selectedOption==="1-20"} value="1-20" name="estimated" onChange={this.handleChange}/><h3>1-20</h3>
                                    
                            </div>
                        </div> 
                        <div className="col-lg-4 col-md-4">
                            <div className="even_box1">
                            <input type="radio" className="ischeck" id="flexCheckDefault" checked={this.state.selectedOption==="21-50"} value="21-50" name="estimated" onChange={this.handleChange}/><h3>21-50</h3>
                                    
                            </div>
                        </div>
                        <div className="col-lg-4 col-md-4">
                            <div className="even_box1">
                            <input type="radio" className="ischeck" id="flexCheckDefault" value="50 " checked={this.state.selectedOption==="50 "} name="estimated" onChange={this.handleChange}/><h3>50 </h3>
                                    
                            </div>
                        </div>
                        
                        </div>   
                        <div className="text_outer atten">You can always edit it later</div>            
                        <div className="btn_outer">
                            
                        <button type='submit' className='btn btn-primary'> Continue </button>
                        {/* <button type='submit' className='btn btn-primary' disabled={btnDisabled}  onClick={redirectNewStep}> Continue </button> */}
                        {/* <a href="Step6" type="button" className="btn btn-primary">Continue</a> */}
                        </div>
                    </div>  
                        </div>
                    </div>
                </form>
              </section>
             
            </div>
            )
            
    } 

}
export default connect()(Step5);

In this I am using radio button on submit how we check radio button is checked not. If check store their value in redux and local storage .

CodePudding user response：

You are storing your selected value in selectedOption, retrieving that state in hadleSubmit should work fine:

  handleSubmit = (e) => {
    e.preventDefault();
    
    const selected = this.state.selectedOption;
    if (!selected) {
        alert('Please select an estimate')
        return
    }
    localStorage.setItem('step5', selected);
    const data = {
      id: new Date(),
      step5: selected,
    };

    this.props.dispatch({ type: 'ADD_STEP5', data });
    window.open('/Step6', '_self');
  };

CodePudding user response：

You are setting the value of selected radio button in the state variable selectedOption. You are assigning event.target.value to selectedOption, so selectedOption will either have value '21-50' or '50 ' You just need to check if selectedOption is defined in your handleSubmit function

handleSubmit = (e) => {
    e.preventDefault();
    var step5  =  this.state.selectedOption;
    if(step5)
         localStorage.setItem('step5', step5);
    const data = {
        id: new Date(),
        step5:step5
    }
    this.props.dispatch({type:'ADD_STEP5',data});
    window.open("/Step6" , "_self");  
}