Question

我有一个父组件，该组件为依次呈现的三个“表单”组件保持状态。看起来像这样：

{{1}}

FormA渲染，然后在单击下一步时，FormB渲染然后FormC渲染，全部在父级中。

以前，我当时使用React Router来执行此操作，但是问题是，我不希望用户将/ formb或/ formc设置为书签，因为那将是无效的状态。

我可以使用switch语句来执行此操作，但是随后我失去了前进/后退按钮浏览器历史记录的功能-而且我基本上不想在组件中重新实现react-router。 最简单的方法是什么？

Answer 1

还没有在浏览器的后面尝试过它，但是看起来可能像这样：

  export default class tmp extends React.Component {
    state = {
      currentVisibleForm: 'A'
    }

  onBackButtonEvent = (e) => {
    if(this.state.currentVisibleForm !== 'A') {
      e.preventDefault();

      //Go back to the previous visible form by changing the state
    } else {
      // Nothing to do
    }

  }

  componentDidMount = () => {
    window.onpopstate = this.onBackButtonEvent;
  }

  render() {
    return (
      <Parent>
        {this.state.currentVisibleForm === 'A' &&
          <FormA />
        }
        {this.state.currentVisibleForm === 'B' &&
          <FormB />
        }
        {this.state.currentVisibleForm === 'C' &&
          <FormC />
        }
      </Parent>
    )
  }
}

告诉我是否有帮助！

Answer 2

因此我能够使用 history api 进行此操作，但是微调可能不值得付出努力-我可能会回复。在两个地方管理国家有点愚蠢。请注意，此历史记录对象与应用程序的“路由器”组件相同，并且没有冲突。

state = {
    FormData: {},
    action: 'Form_1'
}

componentWillMount() {
    this.unlistenHistory = history.listen((location) => {
        if (location.state) {
            this.setState(() => ({
                action: location.state.action
            }));
        }
    });
    history.push(undefined, {action: 'FORM_1'});
}

componentWillUnmount() {
    this.unlistenHistory();
}

finishForm1 = () => {
    const action = 'Form_2';
    history.push(undefined, { action });
    this.setState((prevState) => ({
        // business stuff,
        action
    }));
};


renderCurrentState() {
    switch(this.state.action) {
        case 'FORM_1': 
            return <Form1 />
        ...
    }
}

render() {
    return (
    <div>
        { this.renderCurrentState() }
    </div>
    );
}

用历史反应条件渲染

2 个答案: