从反应中的不同组件打开模态

Question

我的模态：

class DeleteModal extends Component<Prop, State> {
  state = {
    deleteConfirmModel: false
  };

  handleModalToggle() {
    this.setState(({ deleteConfirmModel }) => ({
      deleteConfirmModel: !deleteConfirmModel,
    }));
  };
  Service = new Service();
  delete = () => {
    this.Service
      .delete()
      .then((response) => {
        window.location.reload(false);
      })
      .catch((error) => {
        console.log(error);
      });
  };
  render() {
    const { deleteConfirmModel } = this.state;
    return (
     <React.Fragment>
        <Modal
          isSmall
         title="Confirmation"
         isOpen={deleteConfirmModel}
        onClose={() => this.handleModalToggle()}
          actions={[
            <Button
              key="confirm"
              variant="primary"
              onClick={this.delete}
            >
              Delete
            </Button>,
              <Button key="cancel" variant="link" onClick={this.handleModalToggle}>
              Cancel
            </Button>

          ]}
        >
          Are you sure you want to delete the item?
        </Modal>
       </React.Fragment>
    );
  }

我的其他组件：

export class SampleCard extends Component<Prop, State> {
  state = {
    deleteConfirmModel: false,
  };
  handleModalToggle = () => {
    this.setState(({ deleteConfirmModel }) => ({
      deleteConfirmModel: !deleteConfirmModel,
    }));
  };

  render() {
    const { deleteConfirmModel } = this.state;

    return (
      <React.Fragment>
        <Row>

            <Card
              isCompact={true}
              isSelectable={true}
              className={"productListing"}
            > 
                <Button
                  onClick={() => this.handleModalToggle()}
                  isDisabled={false}
                > Delete Modal</Button>

            </Card>

        </Row>
      </React.Fragment>
    );
  }
}

从我的 SampleCard 组件中，我想在单击 Delete 按钮时打开我的 deleteModal 组件。任何人都可以帮忙解决。因为当我在 SampleCard 组件中编写代码时，出现以下错误： 没有与此调用匹配的重载。 重载 1 of 2, '(props: Readonly):"

Answer 1

在尝试重现它时，我注意到您错过了模态组件上的 export 关键字。

deleteConfirmModEl => deleteConfirmModAl 也有错字。

修复它并简化您的代码后，它对我有用。这是the repro on Stackblitz，如果它不正常，代码：

样品卡：

import React from "react";
import DeleteModal from "./DeleteModal";

export default class SampleCard extends React.Component {
  state = {
    deleteConfirmModal: false
  };

  handleModalToggle = () => {
    this.setState(({ deleteConfirmModal }) => {
      console.log('deleteConfirmModal = ', deleteConfirmModal);
      return {
        deleteConfirmModal: !deleteConfirmModal
      };
    });
  };

  render() {
    console.log('this.state.deleteConfirmModal = ', this.state.deleteConfirmModal);
    return (
      <React.Fragment>
        <button onClick={() => this.handleModalToggle()}>Delete Modal</button>
        <DeleteModal displayed={this.state.deleteConfirmModal} />
      </React.Fragment>
    );
  }
}

删除模式：

import React from 'react';

export default class DeleteModal extends React.Component {
constructor(props){
  super(props);
  this.displayed = this.props.displayed;
}
  render() {
    console.log('props = ', this.props);
    // You can manage the style through a class of course, would be better
    return (
        <div className="modal" style={{display: this.props.displayed ? 'block':'none'}}>
          Are you sure you want to delete the item?
        </div>
    );
  }
}

重现模态的小css：

html, body, #root{
  margin: 0;
  padding: 0;
  position: relative;
}

.modal{
  position: absolute;
  width: 300px;
  height: 300px;
  top: 50px;
  left: 50px;
  border: 1px solid black;
  border-radius: 4px;
}