如何在NextJS中以多步形式传递数据？ [英] How can I pass data in multi-step forms in NextJS?

问题描述

我已开始使用NextJS，最近作出了反应。

我正在尝试在我的应用程序中实现多页表单，但我不知道如何才能持久化表单数据并将其从一个页面传递到另一个页面。

有许多有关使用状态管理库和上下文API的指导原则，但它们要么都在reactjs中，要么定义了不同组件之间的使用。

my_app.js如下所示：

const AppComponent = ({ Component, pageProps, currentUser }) => {
  return (
    <div>
      <AppWrapper>
        <Header currentUser={currentUser} />
        <Component {...pageProps} />
      </AppWrapper>
    </div>
  );
};
AppComponent.getInitialProps = async (appContext) => {
  const client = buildClient(appContext.ctx);

  const { data } = await client.get('/api/client/currentuser');
  let pageProps = {};
  if (appContext.Component.getInitialProps) {
    pageProps = await appContext.Component.getInitialProps(appContext.ctx);
  }
  return {
    pageProps,
    ...data,
  };
};

export default AppComponent

上下文state.js

import { createContext, useContext } from 'react';

const AppContext = createContext();

export function AppWrapper({ children }) {
  let sharedState = {
    /* whatever you want */
  };

  return (
    <AppContext.Provider value={sharedState}>{children}</AppContext.Provider>
  );
}

export function useAppContext() {
  return useContext(AppContext);
}

现在，我需要保存第1页上表单的数据(姓名、姓名)，并将其传递到第2页(电子邮件和电话)，最后传递给我希望包含所有字段的摘要。如何从下一页设置SHARED_STATE？

step1.js 从&Quot；Reaction；

导入Reaction

function Step1(props) {
  return (
    <div>
      <p>Name: <input name="name" /></p>
      <p>Surname: <input name="surname" /></p>
    </div>
  );
}

export default Step1;

step2.js

import React from "react";

export default function Step2(props) {
  return (
    <div>
      <p>Email: <input name="email" /></p>
      <p>Phone: <input name="Phone" /></p>
    </div>
  );

如何从步骤1中的用户数据设置状态并将数据传递给步骤2。 有人能帮我解决这个问题吗？

推荐答案

在Reaction中工作的所有相关状态都将在Next.js中工作，将_app.js视为父组件，并且每页都是其子组件。

也可以使用Reaction上下文，但如果您希望通过大型组件层次结构将状态从父级传递给子级，则该上下文非常有用。这里您只有_app.js和2个直接子项，它们是您的2个表单页面。

您只需在_app.js中创建一个状态，然后将该状态作为属性传递给表单页，如下所示：

import { useState } from "react"

const AppComponent = ({ Component, pageProps, currentUser }) => {
  const [formData, setFormData] = useState({});
  const updateFormData = (newData) => {
    setFormData({ ...formData, ...newData });
  };
  return <Component {...pageProps} updateFormData={updateFormData} />;
};

function Step1({ updateFormData }) {
  const handleNameChange = (event) => {
    updateFormData({ name: event.target.value });
  };
  const handleSurnameChange = (event) => {
    updateFormData({ surname: event.target.value });
  };
  return (
    <div>
      <p>
        Name: <input name="name" onChange={handleNameChange} />
      </p>
      <p>
        Surname: <input name="surname" onChange={handleSurnameChange} />
      </p>
    </div>
  );
}

通过在第二个表单页中执行相同操作，您将把所有表单数据放在formData变量中，您可以将该变量传递到另一个页面以显示结果、执行API调用等。

这篇关于如何在NextJS中以多步形式传递数据？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！