Javascript 如何在React中为删除按钮添加警告/通知？

ImagesUpload.jsx

-->表示组件

deleteImageWarning.jsx

-->通知组件

index.js

-->其中我导出了deleteImageWarning函数

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

在哪里寻找问题 我写的东西（请看下面）根本不起作用。我觉得

validateBeforeDelete

功能有问题；我只是想在DOM中使用正确的值返回通知函数。此外，我缺少在deleteImageWarning组件的内容部分中编写的内容

简要概述 让您了解一下，在处理通知之前，按钮的删除功能工作得非常好。ImagesUpload文件有一个容器，因此，我们可以声明

ImagesUpload.jsx

文件是表示组件，还有一个

ImagesUploadContainer.jsx

文件充当表示组件的容器组件

问题 问题是我不知道如何将我在

ImagesUpload.jsx

文件中声明的delete函数传递给

deleteMageWarning.jsx

组件。这就是我在deleteImageWarning组件的内容常量中缺少的内容。它是否与我的

render（）

函数中声明的常量有关

ImagesUpload.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;

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;

从“React”导入React；
从“样式化组件”导入样式化；
从“../Button”导入{Button，ButtonInverted}；
const StyledNotification=styled.div`
背景：var（--白色）；
填料：var（--m）；
`;
const StyledMessage=styled.p`
字体大小：var（--font-s）；
线高：var（--lineHeight-s）；
裕度：0 var（--l）0；
`;
常量内容=（{？？？？？}）=>(
是否确实要删除此图像？此过程无法撤消。
证实
取消
);
常量deleteImageWarning=（节点，？？？）=>{
node.addNotification({
内容：，
输入：“信息”，
标题：“，
消息：“”，
插入：“顶部”，
容器：“顶部中心”，
动画输入：[“动画”、“fadeIn”]，
动画输出：[“动画”、“淡出”]，
可撤销：{click:true}，
宽度：400
});
}
导出默认deleteImageWarning；

---

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

我认为您的思维方式有点（不是太苛刻）错误，如果我理解错误，请纠正我。

内容应在何处呈现？我看不到它会在哪里

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

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

/[ImagesUpload.jsx中的上一个代码]
{this.state.isdeleting？我认为你的思维方式有点（不是太苛刻）错误，如果我理解错误，请纠正我。应该在哪里呈现
内容
呢？我看不到它会在哪里

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

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

/[ImagesUpload.jsx中的上一个代码]
{this.state.isdeleting？对于详细的答案，代码太多了。我猜您正在寻找类似这样的
onClick={e=>window.confirm（'sure？'）？someHandler（e）：e.preventDefault（）}
我相信我只考虑了一些重要的细节。如果你不知道文件是什么或是做什么的，请告诉我，我会毫不犹豫地向你解释。关于你的答案，这其实不是我想要的。我想要实现的是添加通知，同时能够在新文件中自定义弹出窗口粗略的反应/Redux。类似于他们在notificationOpts const中所做的：有太多的代码用于详细的回答。我猜您正在寻找类似以下内容的
onClick={e=>window.confirm（'sure？'）？someHandler（e）：e.preventDefault（）}
我相信我只考虑了一些重要的细节。如果你不知道文件是什么或是做什么的，请告诉我，我会毫不犹豫地向你解释。关于你的答案，这其实不是我想要的。我想要实现的是添加通知，同时能够在新文件中自定义弹出窗口粗略的反应/重复。类似于他们在notificationOpts const中所做的：