Блог

Главная - Вопросы по программированию - отображение html-формы в режиме реакции

отображение html-формы в режиме реакции

#reactjs #contact-form

Вопрос:

Я создал веб-приложение react, и в приложении есть модал, который будет отображаться с контактной формой внутри него, проблема в том, что созданная мной контактная форма выполнена с использованием некоторых HTML, CSS и некоторых JavaScript. Как мне перенести все это в модал, я довольно новичок в реагировании и, похоже, не могу найти то, что ищу в Интернете

вот мой модальный код

 import React, { useEffect, useState } from "react";
import { Box, Container, Flex } from "@chakra-ui/layout";
import { Button } from "@chakra-ui/react";
import Timeline from "../Events/Timeline";
import ProjectService from "../../services/project.service";
import ProjectDetailsCustomer from "../Project/ProjectDetailsCustomer";
import Form from '../contactForm/Form'
import { EmailIcon } from "@chakra-ui/icons";
import {
    Modal,
    ModalOverlay,
    ModalContent,
    ModalHeader,
    ModalFooter,
    ModalBody,
    ModalCloseButton,
  } from "@chakra-ui/react"
import { useDisclosure } from "@chakra-ui/react"

const CustomerProjectView = (props) => {
    const projectId = props.match.params.param1;
    const [project, setProject] = useState(props.project);


    useEffect(() => {
        if (projectId !== undefined) {
            ProjectService.getProjectByID(projectId).then((projectReturned) => {
                setProject(projectReturned);
            });
        }
    }, [projectId]);

    const { isOpen, onOpen, onClose } = useDisclosure()

    return (
        <Container maxW="6xl" marginTop={12} marginBottom={12}>
            <Flex bg={"brand.background"} borderRadius={8} boxShadow="lg">
                {projectId ? (
                    <Box m={10}>
                        <ProjectDetailsCustomer project={project} />
                        <>
                        <Button
                            leftIcon={<EmailIcon />}
                            colorScheme={"blue"}
                            marginBottom={20}
                            onClick={onOpen}>
                                Contact Us
                                </Button>

                        <Modal isOpen={isOpen} onClose={onClose}>
                            <ModalOverlay />
                            <ModalContent>
                            <ModalHeader>Contact Form</ModalHeader>
                            <ModalCloseButton />
                            <ModalBody>
                                <Form />
                            </ModalBody>
                            <ModalFooter>
                                <Button colorScheme="blue" mr={3} onClick={onClose}>
                                Close
                                </Button>
                            </ModalFooter>
                            </ModalContent>
                        </Modal>
                        </>
            
                        <Timeline project={project} />
                    </Box>
                ) : (
                    <></>
                )}
            </Flex>
        </Container>
    );

};

export default CustomerProjectView;

**************ПРИВЕДЕННЫЙ НИЖЕ КОД ПРЕДСТАВЛЯЕТ СОБОЙ HTML ******************

 <!DOCTYPE HTML>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="/css/contact.css">
    <link rel="preconnect" href="https://fonts.gstatic.com">
    <link href="https://fonts.googleapis.com/css2?family=Poppinsamp;display=swap" rel="stylesheet">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Contact us</title>
</head>
    <body>
        <div class="form-container">
            <form class="contact-form">
            <h2>CONTACT FORM</h2>
                <input type="text" id="name" placeholder="Full name"></br>
                <input type="email" id="email" placeholder="Email"></br>
                <input type="test" id="subject" placeholder="Subject"></br>
                <textarea id="message" placeholder="message" cols="30" rows="10"></textarea></br>
                <input type="submit" id="submit" value="Send Message"></br>
            </form>
        </div> 
        <script src="/js/contact.js"></script>
    </body>
</html>

Комментарии:

1. является ли этот html-файл вашим Form компонентом?

2. Вам нужно предоставить дополнительную информацию, используете ли вы webpack для создания этого проекта? любые рамки, такие как Next.js? или просто использовать простой тег скрипта?

3. да, html-файл является компонентом моей формы, и я считаю, что используется webpack и просто теги сценариев для html

Метки: