reactjs - 通过 React-Toastify 通知传递变量

Question

目前正在开发一个使用 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, record: Values, 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;

标签： reactjsreact-toastify