Блог

Я создаю проект react, в котором на моей домашней странице есть кнопка, и когда я нажимаю на нее, она должна открыть новую страницу, содержащую форму для заполнения. Поскольку это форма, и она должна появляться только после нажатия кнопки на домашней странице, я не хочу использовать react router, потому что я не хочу, чтобы пользователь просто вводил ‘mywebsite.com/form «. Я также хочу, чтобы при отправке формы пользователем страница возвращалась на домашнюю страницу, а данные из формы должны быть доступны на домашней странице. Например, если в форме были текстовые поля, списки, средства выбора даты и т. Д. Я хочу, чтобы все эти данные были на главной странице после отправки формы пользователем.

PS Я использую компоненты material-ui для всего своего приложения, Поэтому текстовые поля, указатели даты и т. Д. Являются компонентами mui, Поэтому выборка данных из этих компонентов должна соответствовать этому.

В вашем домашнем компоненте выполните условный рендеринг, основанный на том, была ли нажата кнопка. Если это так, отобразите свой компонент формы. В идеале ваш домашний компонент должен быть вашим интеллектуальным компонентом, а форма должна быть немым компонентом. Это означает, что Home должен управлять всеми состояниями и формами исключительно для визуальных элементов (пользовательского интерфейса).

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

Поскольку вы используете material-ui, я бы рекомендовал вам использовать один из их диалоговых компонентов. Если вы хотите, чтобы это выглядело так, как будто для заполнения формы открывается совершенно другая страница, вы можете использовать их полноэкранный диалоговый компонент. Создайте свою форму в этом компоненте и измените реквизит по своему вкусу. Условно отображать форму, когда пользователь нажимает кнопку на вашей домашней странице.

Используйте fullscreen prop из API диалога и добавьте другие, которые вам нужны.

Если я могу высказать свое мнение, я думаю, вы можете использовать NextJS с рендерингом на стороне сервера для этого. NextJS предоставляет структурированную папку под названием «страницы». Вы можете добавить свою страницу к этому. Перенаправление также можно выполнить с помощью router в следующем пакете. Простой способ без необходимости в react router. Раньше я использовал react router, пока не узнал об этом.