Question

CardComponent：

export class Card extends Component<Prop, State> {
      state = {
        isCancelModalOpen: false,
      };

      marketService = new MarketService();
      deleteMarket = () => {
        this.marketService
          .deleteMar()
          .then((response) => {
          })
          .catch((error) => {
            console.log(error);
          });
      };
      handleModalToggle = () => {
        this.setState(({ isCancelModalOpen }) => ({
          isCancelModalOpen: !isCancelModalOpen,
        }));
      };

      render() {
        const {isCancelModalOpen, isDropdownOpen } = this.state;
        const dropdownItems = [
          <DropdownItem
            key="action"
            component="button"
            onClick={this.handleModalToggle}
          >
            Delete 
          </DropdownItem>
        ];
        return (      
            {this.CancelModal.map((listing) => (
        <DeleteModal handleModal={this.handleModalToggle}
        deleteProd = {this.deleteProduct}
        description = {listing.description} ></DeleteModal>
            ))}
        );
      }
    }

DeleteModal组件：

interface Prop {
 description: string;
 handleModal: Function;
 deleteProd: Function;
}
class DeleteModal extends Component<Prop, State> {
  state = {
    deleteConfirmModel: false
  };


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

        <Modal
          isSmall
         title="Confirmation"
         isOpen={deleteConfirmModel}
        onClose={() => this.props.handleModal}
        showClose = {false}
          actions={[
            <Button
              key="confirm"
              variant="primary"
              onClick={() => this.props.deleteProd}
            >
              Delete
            </Button>,
              <Button key="cancel" variant="link"  onClick={() => this.props.handleModal}>
              Cancel
            </Button>

          ]}
        >
{description}
        </Modal>

    );
  }
}

export default DeleteModal;

我希望DeleteModal组件在Card组件中可用的Dropdown Delete按钮上打开。代码中没有错误，但是仍然无法在从Card组件中单击Dropdown时触发模态。谁能帮我解决代码的问题吗？

Answer 1

因此，我找到了从不同组件调用模式的解决方案：在card组件中：调用deleteModal组件：

<DeleteModal
      displayModal={deleteModalOpen}
      handleModal={this.handleModalToggle}
      description="Are you sure you want to delete"
    />

DisplayModal，handleModal，decrition将作为DeleteModal组件中的道具：

DeleteModal：

interface Prop {
      displayModal: boolean;
      handleModal: Function;
      description: string;
    }
 <Modal
          isSmall
          title="Confirmation"
          isOpen={this.props.displayModal}
          onClose={() => this.props.handleModal()}
          showClose={false}
          actions={[
            <Button
              key="cancel"
              variant="link"
              onClick={() => this.props.handleModal()}
            >
              Cancel
            </Button>,
          ]}
        >
          {this.props.description}
        </Modal>

从不同组件打开模态

1 个答案: