Изменение содержания Bootstrap модально при отправке формы - PullRequest
Новая
       50

Изменение содержания Bootstrap модально при отправке формы

0 голосов
/ 24 апреля 2020

Я создал компонент navbar, который, когда вы нажимаете на определенную кнопку, появляется модальное окно. Внутри этого модального окна есть форма. Когда форма заполнена (когда все обязательные поля заполнены) и пользователь нажимает кнопку «Добавить», я хочу, чтобы форма исчезла из модального поля и вместо этого появилось сообщение «Завершение успешно». Я также хотел показать спиннер загрузки React в течение примерно 5 секунд до завершения шоу. Вот мой модальный компонент - 

function AddSystemModal(props: any) {
  return (
    <Modal
      {...props}
      size="lg"
      aria-labelledby="contained-modal-title-vcenter"
      centered
    >
      <Modal.Header closeButton>
        <Modal.Title id="contained-modal-title-vcenter">
          Add New System
        </Modal.Title>
      </Modal.Header>
      <Modal.Body>
        <SystemForm />
      </Modal.Body>
      <Modal.Footer></Modal.Footer>
    </Modal>
  );
}

export { AddSystemModal };

Вот мой компонент формы (немного грязный). В тот момент мне удалось заставить блесну появляться, когда нажата кнопка «Добавить», но с точки зрения очистки содержимого модального et c. Я застрял. 

function SystemForm() {
  const [validated, setValidated] = useState(false);

  const [showSpinner, setShowSpinner] = React.useState(false);
  const changeModal = () => setShowSpinner(true);

  const LoadingSpinner = () => (
    <div id="spinner" className="loading-spinner">
      <Spinner animation="border" role="status">
        <span className="sr-only">Loading...</span>
      </Spinner>
    </div>
  );

  const handleSubmit = (event) => {
    const form = event.currentTarget;
    if (form.checkValidity() === false) {
      event.preventDefault();
      event.stopPropagation();
    }
    setValidated(true);
  };

  return (
    <Form noValidate validated={validated} onSubmit={handleSubmit}>
      <Form.Row>
        <Form.Group as={Col} md="4" controlId="validationCustom01">
          <Form.Label>ID</Form.Label>
          <Form.Control
            required
            type="text"
            placeholder="Leave Blank For New System"
            defaultValue=""
          />
        </Form.Group>
        <Form.Group as={Col} md="4" controlId="validationCustom02">
          <Form.Label>Name</Form.Label>
          <Form.Control
            required
            type="text"
            placeholder="Name"
            defaultValue=""
          />
          <Form.Control.Feedback>Looks good!</Form.Control.Feedback>
        </Form.Group>
        <Form.Group controlId="exampleForm.SelectCustomSizeLg">
          <Form.Label>Allow Multiple Xref</Form.Label>
          <Form.Control as="select" custom required>
            <option>1</option>
            <option>2</option>
            <option>3</option>
            <option>4</option>
            <option>5</option>
          </Form.Control>
          <Form.Control.Feedback type="invalid">
            Please select an option.
          </Form.Control.Feedback>
        </Form.Group>
      </Form.Row>
      <Form.Row>
        <Form.Group controlId="exampleForm.SelectCustomSizeLg">
          <Form.Label>Status Code</Form.Label>
          <Form.Control as="select" custom required>
            <option>Available</option>
            <option>Blah</option>
            <option>Blah</option>
          </Form.Control>
          <Form.Control.Feedback type="invalid">
            Please provide a valid status code.
          </Form.Control.Feedback>
        </Form.Group>
        <Form.Group as={Col} md="3" controlId="validationCustom04">
          <Form.Label>Last Modified By</Form.Label>
          <Form.Control type="text" placeholder="" />
        </Form.Group>
      </Form.Row>
      <Button onClick={changeModal} type="submit">
        Add
      </Button>
      <div>{showSpinner ? <LoadingSpinner /> : null}</div>
    </Form>
  );
}

Я пытался поискать в Google, чтобы посмотреть, как я могу очистить содержимое чего-либо в React, но не смог найти много. Мне интересно, связано ли это с тем, как я расположил компонент и нужно ли мне иметь два отдельных компонента внутри модальных и условно отображать их в зависимости от того, нажал ли пользователь «Добавить».

Извиняюсь, если это плохой вопрос - я новичок в изучении React!

1 Ответ

0 голосов
/ 26 апреля 2020

Вот как я бы это сделал ...

  • Имеет флаг formSubmission в родительском элементе, который срабатывает при отправке формы внутри модального окна - это гарантирует, что при повторном модальном отображении форма не отображается
  • Установите флажок buttonClicked внутри модального окна, чтобы узнать, когда показывать / скрывать счетчик
  • Я верю, что вы управляете точным полем, дизайн и т. д. c. демонстрация показывает шаги, где, я думаю, вы застряли

релевантный родительский компонент: 

import React, { useState } from "react";
import ModalExample from "./modal";
import Child from "./child";
import ModalExample from "./modal";

const MyNav = () => {
  const [formSubmitted, setFormSubmitted] = useState(false);

  const handleClick = () => {
    console.log('inside hooks handleClick');
    setFormSubmitted(true);
  }

  return (
    <>
      <nav>
        Navigation
        <ModalExample
          buttonLabel="click Me to fire the modal inside navigation"
          myName={'name'}
          formSubmissionStatus={formSubmitted}
          handleClick={handleClick}
        />
      </nav>
    </>
  );
};

export default MyNav;

релевантный модальный компонент: 

import React, { useState } from "react";
import { Button, Modal, ModalHeader, ModalBody, ModalFooter } from "reactstrap";
import { Form, FormGroup, Label, Input, FormText } from "reactstrap";

const ModalExample = props => {
  const { buttonLabel, className, myName, formSubmissionStatus } = props;

  const [modal, setModal] = useState(false);
  const [spinner, setSpinner] = useState(false);
  const [buttonClicked, setButtonClicked] = useState(false);

  const toggle = () => setModal(!modal);

  const ModalClicked = () => {
    console.log("inside ModalClicked");
    setButtonClicked(true);
    setTimeout(() => {
      setSpinner(false);
      props.handleClick();
    }, 1500);
  };

  return (
    <div>
      <Button color="danger" onClick={toggle}>
        {buttonLabel}
      </Button>
      <Modal isOpen={modal} toggle={toggle} className={className}>
        <ModalHeader toggle={toggle}>Modal title</ModalHeader>
        <ModalBody>
          {formSubmissionStatus ? (
            <>
              <p>Form is submitted</p>
            </>
          ) : buttonClicked ? (
            <img src="https://i.ya-webdesign.com/images/loading-png-gif.gif" />
          ) : (
            <Form>
              <FormGroup>
                <Label for="exampleEmail">Email</Label>
                <Input
                  type="email"
                  name="email"
                  id="exampleEmail"
                  placeholder="with a placeholder"
                />
              </FormGroup>
              <FormGroup>
                <Label for="examplePassword">Password</Label>
                <Input
                  type="password"
                  name="password"
                  id="examplePassword"
                  placeholder="password placeholder"
                />
              </FormGroup>
            </Form>
          )}
        </ModalBody>
        <ModalFooter>
          <button onClick={ModalClicked} type="button">
            {myName}
          </button>
        </ModalFooter>
      </Modal>
    </div>
  );
};

export default ModalExample;

завершено рабочий стек стека здесь

...