reactjs 如何使用react-redux构建一个多步骤表单流，每一步都会更改URL

我正在努力构建一个多步骤表单流，用户首先加载：/welcome，然后将引导用户完成以下操作

step 0: `/welcome` (Should redirect to step 1)
step 1: `/welcome/workplace`
step 2: `/welcome/profile`

以下是我到目前为止的情况：

App.jsx：

import Welcome from '../containers/welcome/Welcome';

const App = ({store}) => {
  return (
    <StoreProvider store={store}>
      <ConnectedRouter history={history}>
        <Switch>
          <PrivateRoute exact path="/welcome" layout={MainLayout} component={Welcome} />
          <WithMainLayout exact path="/" component={Home} />
          <AuthRoutes path={`/${clientResourceName}`} wrapper={WithMainLayout} />
          <WithMainLayout component={NotFound} />
        </Switch>
      </ConnectedRouter>
    </StoreProvider>
  );
};

Welcome.js

import React from 'react';
import WorkPlacePage from '../../components/welcome/WorkPlacePage';

class Welcome extends React.Component {

  constructor(props) {
    super(props);
    this.state = {
      step: 1
    };
  }

  showStep() {
    const {history} = this.props

    console.log('showStep');
    console.log({history})

    switch (this.state.step) {
      case 1:
        return <WorkPlacePage history={history} />
      default:
        return (
          <div>
            <h1>Case: Default</h1>
          </div>
        );
    }
  }

  render() {
    var style = {
      width : (this.state.step / 4 * 100) + '%'
    }
    return (
      <main>
        <span className="progress-step">Step {this.state.step}</span>
        <progress className="progress" style={style}></progress>
        {this.showStep()}
      </main>
    )
  }
}

export default Welcome;

WorkPlacePage.js

import React from 'react';
import {connect} from 'react-redux';
import {bindActionCreators} from 'redux';

class WorkPlacePage extends React.Component {

  render() {

    console.log('this.props.history')
    console.log(this.props.history)

    return (
      <div>
        <h1>Workplace</h1>
        <span>
        survey things
        <button onClick={() => this.props.history.push("/confirmation")}>next page</button>
        </span>
      </div>
    );
  }
}

export default WorkPlacePage;

作为一个React和Redux新手，我可以在以下几个方面提供建议：
1.我是否正确地构建了这个多步骤的表单？
1.如果用户在浏览器中加载/welcome，将浏览器自动重定向到步骤1 /welcome/workplace的正确方法是什么
1.在WorkplacePage.js上，当我点击NEXT按钮时，我会看到以下JS错误：=Uncaught TypeError: Cannot read property 'push' of undefined--为什么历史没有定义？

1.是的这个结构看起来不错。我认为您会希望为每一步创建一个单独的路由组件，因为我确信每一步都会随着更多的规则和验证而增长。
1.要重定向，可以渲染<Redirect to="/somewhere/else"/>-https://github.com/ReactTraining/react-router/blob/master/packages/react-router/docs/api/Redirect.md
1.你需要将 prop 传递到<WorkPlacePage />中
比如：

class Welcome extends React.Component {

  constructor(props) {
    super(props);
    this.state = {
      step: 1
    };
  }

  render() {
    const {history} = this.props
    switch (this.state.step) {
      case 1:
        return <WorkPlacePage history={history} />
      case 2:
        return (
          <div>
            <h1>WIP</h1>
          </div>
        );
      default:
        return (
          <div>
            <h1>Case: Default</h1>
          </div>
        );
        }

  }
}

reactjs 如何使用react-redux构建一个多步骤表单流，每一步都会更改URL

1条答案

相关问题

热门标签

最新问答