bugfix> javascript > 投稿

順番にレンダリングする3つの「フォーム」コンポーネントの状態を維持する親コンポーネントがあります。次のようになります。

<Parent>
    { renderFormBasedOnState() }
</Parent>

FormAがレンダリングし、次にクリックするとFormBがレンダリングされ、次にFormCがレンダリングされ、すべて親になります。

以前は 私はこれを行うためにReact Routerを使用していましたが、問題は、無効な状態になるため、ユーザーが/ formbまたは/ formcをブックマークできないようにすることです。

switchステートメントを使用してこれを行うことはできますが、次に進む/戻るボタンのブラウザー履歴機能が失われます。また、基本的にコンポーネントで反応ルーターを再実装したくありません。何ですか最も単純な これについて行く方法?

回答 2 件
  • ブラウザの背面で試したことはありませんが、次のようになります。

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

    助けになるか教えてください!

  • だから私はこれを動作させることができました歴史API、しかし、微調整する努力の価値はないかもしれません-私は元に戻すかもしれません。 2つの場所で状態を管理するのは、ちょっと馬鹿げています。この履歴オブジェクトは、アプリケーションの「ルーター」コンポーネントと同じであり、競合しないことに注意してください。

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

あなたの答え