提交表单时更改引导模式的内容

Question

我创建了一个导航栏组件，当您单击某个按钮时，会弹出一个模式框。在这个模态框中是一个表格。当表单完成（填写所有必填字段）并且用户单击“添加”按钮时，我希望表单从模式框中消失并显示一条消息，而不是显示“完成成功”。我还想在完成显示前大约 5 秒显示一个 React 加载微调器。 这是我的模态组件 -

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

这是我的表单组件（有点乱）。目前，当单击“添加”按钮时，我设法使微调器出现，但在清除模式的内容等方面，我被卡住了。

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

我尝试用谷歌搜索，看看如何清除 React 中某些内容的内容，但找不到太多内容。我想知道这是否是由于我如何安排组件以及是否需要在模式内部有两个单独的组件并根据用户是否单击“添加”有条件地呈现它们。

抱歉，如果这是一个不好的问题 - 我是学习 React 的新手！

Answer 1

这就是我的做法......

• 在模态中提交表单时触发父级中的 formSubmission 标志 - 这将确保在重复模态显示时，不会显示表单
• 在模态框内有一个 buttonClicked 标志，以了解何时显示/隐藏微调器
• 我相信您可以管理确切的领域、设计等。演示显示了我认为您遇到困难的步骤

相关父组件：

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;

完成working stackblitz here