通过 React-Toastify 通知传递变量

问题描述

目前正在开发一个使用 React 作为前端的应用程序。目前，存在可以在行项目容器中引用的参数。我想要做的是，当尝试删除参数时，将使用 Toastify 在屏幕上弹出一个通知，如果他们确定要删除参数，将提示用户单击“是”。

根据当前代码的设置方式，参数有一个与之关联的值，因此程序知道要删除哪个参数。我在尝试通过 Toastify 通知传递值时遇到问题，因此删除参数的函数调用会通过该通知接收值。

这里是整体代码，与Toastify相关的部分在第30-47和89-95行

import { Button,Input,Modal,Table } from 'antd';
import { Values } from '../App';
import '../App.css';
import CollectionCreateForm from "./CollectionCreateForm";
import { toast } from 'react-toastify';
import 'react-toastify/dist/ReactToastify.css';


toast.configure()
// interface for parameters sent to component
interface ParameterEditProps {
    visible: boolean; // if component can be seen

    visibleCCF: boolean;
    setVisible: (a:boolean)=> void;
    onCreate: (values:Values)=> void;
    editingKey: string;

    cancelEdit: () => void; // cancel editing
    parameters: Values[]; // parameters in state
    updateParameters: (updatedParams: Values[],removedParams: Values[]) => void; // update and remove parameters
}

// component for editing and removing parameters
const ParameterEdit: React.FC<ParameterEditProps> = ({visible,cancelEdit,parameters,updateParameters,setVisible,visibleCCF,onCreate,editingKey}) => {
    const [removedValues,setRemovedValues] = useState<Values[]>([]);
    const [paramData,setParamData] = useState<Values[]>([]);

    interface Props {
        _: any
        closeToast: any
        parameter: Values
    }

    const DeleteWarning: React.FC<Props> = ({_,closeToast,parameter}) => {
        return (
            <div>
                Are you sure you wish to delete this parameter? It may be currently used in a formula?
                <Button type="link" onClick={() => {closeToast(); removeParam(parameter)}}>Yes</Button>
            </div>
        );
    }

    const notify = (parameter: Values) => {
        toast.warn(DeleteWarning,{position: toast.POSITION.TOP_CENTER})
    }

    // deep copy of parameters so they are not updated even if canceled
    useEffect(() => {
        setParamData(JSON.parse(JSON.stringify(parameters)));
    },[parameters])

    // update parameter values from user input
    const inputChange = (index: number,key: string) => (e: any) => {
        const newData = [...paramData]

        if (key === 'value') {
            newData[index].value = e.target.value;
        }
        else {
            newData[index].name = e.target.value;
        }
        
        setParamData(newData);
    }

    // remove value and add it to removed state
    const removeParam = (value: Values) => {
        setRemovedValues(removedValues.concat(value));
        setParamData(paramData.filter(a => a.id !== value.id));
    }

    const columns = [
        {
            title: "Name",dataIndex: "name",render: (name: string,record: Values,index: number) => (<Input value={name} onChange={inputChange(index,"name")}/>)
        },{
            title: "Value",dataIndex: "value",render: (value: number,index: number) => (<Input value={value} onChange={inputChange(index,"value")}/>)
        },{
            title: "Action",dataIndex: "action",width: "10%",render: (_: any,parameter: Values) => {
                return (
                    <span>
                        <Button onClick={() => notify(parameter)}>Delete</Button>
                    </span>
                );
            }
        }
    ];


    return (
        <>
        <Modal
            visible={visible}
            title="Edit Parameters"
            onCancel={cancelEdit}
            footer={[
                <Button
                  disabled={editingKey !== ''}
                  onClick={() => {
                    setVisible(true);
                  }}
                >
                  Add Parameter
                </Button>,<Button type="primary" onClick={() => updateParameters(paramData,removedValues)}>
                    Save
                </Button> 
            ]}
        >
            <Table
                bordered
                columns={columns}
                dataSource={paramData}
            />
        </Modal>
        <CollectionCreateForm
            visible={visibleCCF}
            onCreate={onCreate}
            onCancel={() => {
                setVisible(false);
            }}
        />
        </>
        
    )
}

export default ParameterEdit;

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）