Question

我正在创建一个反应项目，在我的主页上有一个按钮，当我单击它时，它应该打开一个包含要填写的表格的新页面。因为它是一种表单，并且仅应在单击主页上的按钮之后显示，所以我不想使用react router，因为我不希望用户仅键入“ mywebsite.com/form”。我还需要这样的功能：当用户提交表单时，页面将返回首页，并且表单中的数据应在主页中可用。例如，如果表单具有文本字段，列表，日期选择器等，那么我希望在用户提交表单后主页中的所有数据。

P.S。我在整个应用程序中都使用了Material-ui组件，因此文本字段，日期选择器等都是mui组件，因此从这些组件中获取数据必须符合该要求。

Answer 1

如果我能给出我的意见，我认为您可以将NextJS与服务器端渲染一起使用。 NextJS提供了一个名为“ pages”的结构化文件夹。您可以将页面添加到此。也可以使用下一个软件包中的路由器来完成重定向。一种无需反应路由器的简单方法。以前我一直使用React Router，直到我发现这一点。

Answer 2

在Home组件中，根据是否单击按钮进行条件渲染。如果是这样，则渲染您的Form组件。理想情况下，您的Home组件应该是您的智能组件，而Form应该是一个哑组件。意味着Home应该管理所有状态，而Form纯粹是为了视觉效果（UI）。

import React, {useState, useEffect} from 'react';
import myForm from './myForm';

const Home = () => {
  const [isBtnClicked, setIsBtnClicked] = useState(false);
  const [formData, setFormData] = useState(undefined);

  useEffect(() => {
    if(formData){
     setIsBtnClicked(false); // or you can pass this setter to form component and set to false when form is submitted.
    }
  },[formData])

 return (
    <> 
      {isBtnClicked 
         ? <myForm setFormData={setFormData} />
         : (<h2>Home With Button</h2>
            <Button variant="contained" onClick={() => setIsBtnClicked(true)})
       }
};

import React from 'react';
const myForm = ({setFormData}) => {
  //assuming you have refs to all inputs
  const handleFormSubmit = (e) => {
   e.preventDefault();
   // construct form data and call setFormData()
  }

 return (
   <>
    <form onSubmit={handleFormSubmit()}>
     ...
    </form>
   </>
};

Answer 3

由于您正在使用material-ui，因此建议您使用其Dialog组件之一。如果要使其看起来像一个完全不同的页面可以打开以填写表格，则可以使用其full-screen dialog组件。在此组件中构建表单，并根据自己的喜好更改道具。当用户单击您主页上的按钮时，有条件地呈现表单。

使用Dialog API中的fullscreen道具并添加您需要的其他东西。

如何在不使用路由器的情况下创建新页面

3 个答案: