Передать данные формы в модальный компонент React / Boostrap - PullRequest
Новая
       21

Передать данные формы в модальный компонент React / Boostrap

1 голос
/ 30 апреля 2020

У меня есть модальный компонент и компонент формы. Я пытаюсь передать данные с помощью перехватчиков React из формы обратно в модальное. У меня проблемы с этим. Вот что у меня есть -

Модальный (родительский) 

interface ISystem {
  systemName: string;
  allowNumber: number;
  statusCode: string;
  createdBy?: string;
  createdDate?: string;
}

const ModalForm = (props) => {

  const { buttonLabel, className } = props;

  const [modal, setModal] = useState(false);

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

  const addButtonHandler = () => {
    toggle();
   console.log(FORM DATA SHOULD BE HERE)
  };

  return (
    <div>
      <Button color="primary" onClick={toggle}>
        {buttonLabel}
      </Button>
      <Modal
        isOpen={modal}
        toggle={toggle}
        className={className}
        centered
        size="lg"
      >
        <ModalHeader toggle={toggle}>{buttonLabel}</ModalHeader>
        <ModalBody>
          <AddSystem></AddSystem>
        </ModalBody>
        <ModalFooter>
          <Button color="primary" onClick={addButtonHandler}>
            Add
          </Button>{" "}
          <Button color="secondary" onClick={toggle}>
            Cancel
          </Button>
        </ModalFooter>
      </Modal>
    </div>
  );
};

export default ModalForm;

Это мой компонент формы 


const AddSystem = (props) => {
  const [systemId, setSystemId] = useState("");
  const [systemName, setSystemName] = useState("");
  const [allowNumber, setAllowNumber] = useState("");
  const [statusCode, setStatusCode] = useState("");
  const [lastModifiedBy, setLastModifiedBy] = useState("");

  const submitHandler = (event) => {
    event.preventDefault();

  };

  return (
    <Fragment>
      <Form onSubmit={submitHandler} className="mx-auto">
        <Form.Group as={Row} controlId="systemId">
          <Form.Label column sm="2">
            {" "}
            ID{" "}
          </Form.Label>
          <Col sm="10">
            <Form.Control
              type="text"
              name="systemId"
              placeholder="Leave blank for new system"
              value={systemId}
              disabled
              onChange={(event) => setSystemId(event.target.value)}
            />
          </Col>
        </Form.Group>

        <Form.Group as={Row} controlId="systemName">
          <Form.Label column sm="2">
            {" "}
            Systen Name{" "}
          </Form.Label>
          <Col sm="10">
            <Form.Control
              type="text"
              name="systemName"
              placeholder=""
              value={systemName}
              onChange={(event) => setSystemName(event.target.value)}
            />
          </Col>
        </Form.Group>

        <Form.Group as={Row} controlId="allowNumber">
          <Form.Label column sm="2">
            {" "}
            Allow Number{" "}
          </Form.Label>
          <Col sm="10">
            <Form.Control
              as="select"
              name="allowNumber"
              value={allowNumber}
              onSelect={(event) => setAllowNumber(event.target.value)}
            >
              <option>Choose...</option>
              {["1", "2", "3", "4", "5"].map((opt) => (
                <option>{opt}</option>
              ))}
            </Form.Control>
          </Col>
        </Form.Group>

        <Form.Group as={Row} controlId="statusCode">
          <Form.Label column sm="2">
            {" "}
            Status Code{" "}
          </Form.Label>
          <Col sm="10">
            <Form.Control
              as="select"
              name="statusCode"
              value={statusCode}
              onSelect={(event) => setStatusCode(event.target.value)}
            >
              <option>Choose...</option>
              {["Active", "Draft"].map((opt) => (
                <option>{opt}</option>
              ))}
            </Form.Control>
          </Col>
        </Form.Group>

        <Form.Group as={Row} controlId="lastModifiedBy">
          <Form.Label column sm="2">
            {" "}
            Last Modified By{" "}
          </Form.Label>
          <Col sm="10">
            <Form.Control
              type="text"
              name="lastModifiedBy"
              placeholder=""
              value={lastModifiedBy}
              disabled
              onChange={(event) => setLastModifiedBy(event.target.value)}
            />
          </Col>
        </Form.Group>
      </Form>
    </Fragment>
  );
};

export default AddSystem;

Я не хочу иметь кнопку внутри формы. Кнопка должна оставаться в модальном нижнем колонтитуле, но каким-то образом получать информацию из формы ... Это сделано для того, чтобы модал мог повторно использоваться и в него можно было передать любую форму, возможно

...