javascript - 在 redux store 中存储多页表单

Question

基本上我有一个 3 页的表单，单击一个页面上的提交按钮会将您带到下一页等。

在第三页上，我希望将这 3 个页面中的所有数据放入 redux 存储中。

我正在使用redux-form以下示例将其实现到我的项目中https://codesandbox.io/s/0Qzz3843。

在示例中，页面上有一个部分，当我输入它们时，值显示在组件中，我不需要这个。

我只想在提交最终表单时提醒所有数据。

对不起，我不能把它放在像代码笔这样的东西上，因为它是一个大项目。我也无法更改表单，因为我使用的 react-bootstrap 表单必须采用这种精确的布局：

最后一页：

 import React, { Component } from 'react';
    import { Col, Row, Button, Form, FormGroup, Label, Input, FormText } from 'reactstrap';
    import { withRouter } from 'react-router-dom';
    import validate from '../validate';
    import { reduxForm } from 'redux-form';
    import './NewForm.css';
    import renderField from '../renderField';
    import data from '../data.json';

    const NewFormPOI = props => {
            const { handleSubmit } = props;
            let placeholders = data.en.placeholders;

            return (
                <Form onSubmit={handleSubmit} className="form">
                    {/* General Information */}
                    <FormGroup row>
                        <Col sm={6}>
                            <Input component={renderField} type="text" name="poiName" id="poiName" placeholder={placeholders.poiName} />
                        </Col>
                        <Col sm={6}>
                            <Input component={renderField} id="poiType" className="form-control" type="select" name="poiType">
                            <option className="selectDefault" disabled selected>{placeholders.poiType}</option>
                            <option value="Hu">Hi</option>
                            </Input>
                        </Col>
                    </FormGroup>
                    <FormGroup row>
                        <Col sm={12}>
                            <Input component={renderField} type="textarea" name="poiDesc" id="poiDesc" placeholder={placeholders.POIdesc} />
                        </Col>
                    </FormGroup>
                    <FormGroup row>
                        <Col sm={6}>
                            <Input component={renderField} type="email" name="poiDuration" id="poiDuration" placeholder={placeholders.poiDuration} />
                        </Col> 
                        <Col sm={6}>
                            <Input component={renderField} type="text" name="poiRanking" id="poiRanking" placeholder={placeholders.poiRanking} />
                        </Col>
                    </FormGroup>
                    <FormGroup row>
                        <Col sm={6}>
                            <Input component={renderField} type="text" name="poiAccess" id="poiAccess" placeholder={placeholders.access} />
                        </Col>
                        <Col sm={6}>
                            <Input component={renderField} type="textarea" name="poiTime" id="poiTime" placeholder={placeholders.times} />
                        </Col>
                    </FormGroup>
                    <hr/>
                    <FormGroup row>
                        <Col sm={12}>
                            <Input component={renderField} type="textarea" name="txtHeader" id="txtHeader" placeholder={placeholders.textHeader} />
                        </Col>
                    </FormGroup>
                    <FormGroup row>
                        <Col sm={12}>
                            <Input component={renderField} type="textarea" name="txtContent" id="txtContent" placeholder={placeholders.textContent}/>
                        </Col>
                    </FormGroup>
                    <FormGroup check row>
                        <Col sm={{ size: 6 }}>
                            <Button className="btn-info" type="submit" className="next">Next </Button>
                        </Col>
                    </FormGroup> 
                </Form>
            )
        }
        export default withRouter(reduxForm({
            form: 'wizard', //                 <------ same form name
            destroyOnUnmount: false, //        <------ preserve form data
            forceUnregisterOnUnmount: true // <------ unregister fields on unmount
          })(NewFormPOI));

WIZARDFORM.JS

import React, { Component } from 'react'
import PropTypes from 'prop-types'
import NewFormDetails from './components/NewFormDetails';
import NewFormTours from './components/NewFormTours';
import NewFormPOI from './components/NewFormPOI';

class WizardForm extends Component {
  constructor(props) {
    super(props)
    this.nextPage = this.nextPage.bind(this)
    this.previousPage = this.previousPage.bind(this)
    this.state = {
      page: 1
    }
  }
  nextPage() {
    this.setState({ page: this.state.page + 1 })
  }

  previousPage() {
    this.setState({ page: this.state.page - 1 })
  }

  render() {
    const { onSubmit } = this.props
    const { page } = this.state
    return (
      <div>
        {page === 1 && <NewFormDetails onSubmit={this.nextPage} />}
        {page === 2 && (
          <NewFormTours
            previousPage={this.previousPage}
            onSubmit={this.nextPage}
          />
        )}
        {page === 3 && (
          <NewFormPOI
            previousPage={this.previousPage}
            onSubmit={onSubmit}
          />
        )}
      </div>
    )
  }
}

WizardForm.propTypes = {
  onSubmit: PropTypes.func.isRequired
}

export default WizardForm

商店.JS

  import { createStore, combineReducers } from 'redux';
    import { reducer as reduxFormReducer } from 'redux-form';

    const reducer = combineReducers({
      form: reduxFormReducer, // mounted under "form"
    });
    const store = (window.devToolsExtension
      ? window.devToolsExtension()(createStore)
      : createStore)(reducer);

    export default store;

索引.JS

import React from 'react';
import ReactDOM from 'react-dom';
import { BrowserRouter as Router } from "react-router-dom";
import './index.css';
import App from './App';
import * as serviceWorker from './serviceWorker';
import { createBrowserHistory } from "history";
import { Provider } from "react-redux";
import store from './store';


const history =  createBrowserHistory();

ReactDOM.render(
  <Provider store={store}>
    <Router history={history}>
      <App />
    </Router>
  </Provider>,
  document.getElementById("root")
);

serviceWorker.unregister();

APP.JS

 render() {

        const mouseEnter = e => {
          this.setState({sideNav: "sideNav sidenav---sidenav---_2tBP sidenav---expanded---1KdUL"});
        }    

        const mouseLeave = e => {
          this.setState({sideNav: "sidenav---sidenav---_2tBP sidenav---collapsed---LQDEv"});
        }


        return (
          <div className="App container">
            <div>
              <SideNav 
                onMouseEnter={mouseEnter} 
                onMouseLeave={mouseLeave}
                className={this.state.sideNav}
                onSelect={(selected) => {
                    // Add your code here
                }}
              >
                <SideNav.Nav  defaultSelected="home">
                    <NavItem eventKey="home">
                        <NavIcon>
                            <Link to="/"><img src={Dash}/></Link>
                        </NavIcon>
                        <NavText>
                            <Link to="/">Dashboard</Link>
                        </NavText>
                    </NavItem>
                    <NavItem eventKey="sites">
                        <NavIcon>
                          <Link to="/sites"><img src={Site} /></Link>
                        </NavIcon>
                        <NavText>
                            <Link to="/sites">Sites</Link>
                        </NavText>
                    </NavItem>
                    <NavItem eventKey="tours">
                      <NavIcon>
                        <Link to="/tours"><img src={Tour}/></Link>
                      </NavIcon>
                      <NavText>
                          <Link to="/tours">Tours</Link>
                      </NavText>
                    </NavItem>
                    <NavItem eventKey="media">
                        <NavIcon>
                          <Link to="/media"><img src={Media}/> </Link>
                        </NavIcon>
                        <NavText>
                            <Link to="/media">Media</Link>
                        </NavText>
                    </NavItem>
                    <NavItem eventKey="newSite">
                        <NavIcon>
                            <Link to="/newSite/details"><img src={NewSite} /></Link>
                        </NavIcon>
                        <NavText>
                            <Link to="/newSite/details">Add new Site</Link>
                        </NavText>
                    </NavItem>
                    <NavItem eventKey="language">
                        <NavIcon>
                            <Link to="/language"><img src={Lang} /></Link>
                        </NavIcon>
                        <NavText>
                            <Link to="/language">Language</Link>
                        </NavText>
                    </NavItem>
                    <NavItem eventKey="profile">
                        <NavIcon>
                            <Link to="/profile"><img src={Profile} /></Link>
                        </NavIcon>
                        <NavText>
                            <Link to="/profile">Profile</Link>
                        </NavText>
                    </NavItem>

                </SideNav.Nav>
              </SideNav>
            </div>
            <WizardForm onSubmit={showResults} />
            {/*<Routes childProps={this.state} /> */ }
          </div>
        );
      }
    }

    export default App;

标签： javascriptreactjsredux