1

ImagesUpload.jsx--> Presentational 组件 deleteImageWarning.jsx--> Notifications 组件 index.js--> 我在其中导出了 deleteImageWarning 函数

目标

我想在我的 React 应用程序中包含一个通知或弹出窗口，以提醒用户并让他们选择取消或确认操作，在这种情况下，删除附加到作业表的图像。当用户单击位于已附加到页面的图像旁边的删除按钮时，应触发此通知。

在哪里寻找问题

我写的（请看下面）根本不起作用。我觉得这个validateBeforeDelete功能有问题；我只是想在 DOM 中返回具有正确值的通知函数。此外，我在 deleteImageWarning 组件的 Content 部分缺少要写的内容。

简要概述

为了给您一个想法，按钮的删除功能在处理通知之前工作得非常好。ImagesUpload 文件有一个容器，因此，我们可以声明该ImagesUpload.jsx文件是展示组件，并且有一个ImagesUploadContainer.jsx文件充当展示组件的容器组件。

问题

问题是我不知道如何将我在ImagesUpload.jsx文件中声明的删除函数传递给deleteImageWarning.jsx组件。这肯定是我在 deleteImageWarning 组件的 Content 常量中所缺少的。它与我的render()函数中声明的常量有什么关系吗？

图片上传.jsx

    //importing the deleteImageWarning function
    import {
      deleteImageWarning,
    } from '../common/notifications';
    
    //this is the function that deletes the image with the required values
      async handleDeleteImage (jobsheetId, imageId) {
        this.props.deleteImage({jobsheetId: jobsheetId, imageId: imageId});
      }
    
    //this is a validate function that is supposed to trigger the deleteImageWarning function
      validateBeforeDelete = (jobsheetId, imageId) => {
        return deleteImageWarning(this.notificationDOMRef.current, () => this.handleDeleteImage(jobsheetId, imageId));
      }
    
    render() {
    const { ... } = this.props;
    const { ... } = this.state;
    return (
    //TO BE AWARE! the following delete button with an onClick function has been written using React final form's syntax
    ...
    <StyledSectionColRight>
      <Button red type="button" onClick={() => this.validateBeforeDelete(id, image.id)}>Delete</Button>
    </StyledSectionColRight>
    ...
    );
    }
    
    export default ImagesUpload;

index.js

（没有什么真正重要的，以防万一有人认为错误是由于没有导出 deleteImageWarning）

    //deleteImageWarning included in the index.js file
    export { default as deleteImageWarning } from './deleteImageWarning';

deleteImageWarning.jsx

    import React from 'react';
    import styled from 'styled-components';
    import { Button, ButtonInverted } from '../button';
    
    const StyledNotification = styled.div`
      background: var(--white);
      padding: var(--spacer-m);
    `;
    
    const StyledMessage = styled.p`
      font-size: var(--font-s);
      line-height: var(--lineHeight-s);
      margin: 0 0 var(--spacer-l) 0;
    `;
    
    const Content = ({ ????? }) => (
      <StyledNotification>
        <StyledMessage>
          Are you sure you want to delete this image? This process cannot be undone.
        </StyledMessage>
        <Button type="button" red onClick={?????}>Confirm</Button>
        <ButtonInverted type="button">Cancel</ButtonInverted>
      </StyledNotification>
    );
    
    const deleteImageWarning = (node, ?????) => {
      node.addNotification({
        content: <Content ?????={?????} />,
        type: "info",
        title: "",
        message: "",
        insert: "top",
        container: "top-center",
        animationIn: ["animated", "fadeIn"],
        animationOut: ["animated", "fadeOut"],
        dismissable: { click: true },
        width: 400
      });
    }
    
    export default deleteImageWarning;

为了让它非常明显，我在代码中添加了几个问号来突出显示我不知道该写什么的地方。

4

1 回答 1

0

我认为您的思维方式有些（不要苛刻）错误，如果我有误解，请纠正我。应该在哪里Content渲染？我看不出它会是什么地方。

我要做的是创建一个新组件（而不是函数），并且仅在状态（例如state = { ... , isdeleting = true }）中的标志变为真时才呈现它。您还可以将要删除的图像信息存储在状态中并将其传递给组件：

//[prev. Code in ImagesUpload.jsx]
{ this.state.isdeleting ? <DeletImgWaring handleDeleteImage = {this.handleDeleteImage} imgInformation={//e.g. this.state.imgToBeDelInfo}

这样你就更多地考虑基于组件。您可以在其他地方重用DeletImgWaring-Component。

这有帮助吗？

问候

于 2019-04-02T11:59:41.913 回答