对文件进行反应的多模式使用导入

Question

我有一个带有4个按钮的网格，它打开了不同的模式如何将模态与其他文件和导入分开

例如：模态客户，模态跟进，模态日历

在我的网格按钮中，我叫不同的模式想要在不同的文件中，因为我可以在不同的网格中使用

网格按钮

import Client from './clientModal';
import Followup from './followup';
import Calendar from './calendar';

Answer 1

模式形式

import {
  Button,
  ModalBody,
  ModalFooter,
  ModalHeader,
  Col,
  Form,
  FormGroup,
  Input,
  Label
} from "reactstrap";

const ModalClients = props => {
  this.props = {
    modalClient: false,
    firstName: null

  };

  return (
    <Form
      method="POST"
      onChange={this.handleChange}
      onSubmit={this.onCreate}
      encType="multipart/form-data"
    >
      <ModalHeader toggleModal={this.toggleClient} className="blue-header">
        <i className="cui-people"></i>Clients
      </ModalHeader>
      <ModalBody>
        <FormGroup row className="my-0">
          <Col xs="8">
            <FormGroup>
              <Label htmlFor="firstName">First Name</Label>
              <Input
                onChange={this.handleChange}
                name="firstName"
                type="text"
                id="firstName"
                value={this.props.firstName || ""}
                placeholder="Enter First Name"
              />
            </FormGroup>

      </ModalBody>

      <ModalFooter>
        <Button color="primary" type="submit" onClick={this.toggleClient}>
          <i className="cis-check-double-alt"></i> Save
        </Button>
        <Button
          color="secondary"
          onClick={() => {
            this.toggleClient();
            this.resetForm();
          }}
        >
          Cancel
        </Button>
      </ModalFooter>
    </Form>
  );
};

export default ModalClients;

带有按钮的文件网格

import ClientModal from './clientModal';

 <Modal
            isOpen={this.state.info}
            toggle={this.toggleInfo}
            backdrop="static"
            keyboard={false}
            className={"modal-lg " + this.props.className}
          >
            <ClientModal />

          </Modal>

按钮

<Row>
        <Button className="btn btn-primary" onClick={() => this.toggleInfo(id)}>
          <i className="cis-comment-bubble-edit"></i>
        </Button>
        &nbsp;
        <Button
          className="btn btn-success"
          onClick={() => this.toggleClient(id)}
        >
</Row>