不是将值存储到本地存储，而是想在 Redux 中存储值我该怎么做？

Question

你好，我在 React JS.Instead 中使用 class 组件将值存储到 Redux 中的本地存储存储值，我该怎么做？我们如何在 React JS 中实现它。下面我分享我的 code.Please 检查我哪里做错了？

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

在此我使用单选按钮提交我们如何检查单选按钮是否被选中。如果检查将它们的值存储在 redux 和本地存储中。

Answer 1

您正在 selectedOption 中存储您选择的值，在 hadleSubmit 中检索该状态应该可以正常工作：

  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');
  };

Answer 2

您正在设置状态变量 selectedOption 中所选单选按钮的值。您正在将 event.target.value 分配给 selectedOption，因此 selectedOption 的值为“21-50”或“50+” 您只需要检查 selectedOption 是否在您的 handleSubmit 函数

中定义

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");  
}

不是将值存储到本地存储，而是想在 Redux 中存储值我该怎么做？

Instead of storing values to local storage want to store values in Redux how can i Do?

reactjs