[英]How to change a function passed as a prop to React component?
I'm trying to build a reusable SnackBar (little popup displaying info of what just happened) component with optional UNDO action.我正在尝试构建一个具有可选UNDO 操作的可重用 SnackBar(显示刚刚发生的信息的小弹出窗口)组件。 I would like to use it like this:我想像这样使用它:
import SnackBar from "./SnackBar";
import { useState } from "react";
const MainComponent({item}) => {
const [snackBarVisible, setSnackBarVisible] = useState(false);
const [snackBarMessage, setSnackBarMessage] = useState("");
const [undoFunction , setUndoFunction ] = useState(null);
//var undoFunction = null;
const undoAddToFav = () => {
//code that removes from favorites the stuff that was just added
console.log("removed last added product from favs");
};
const undoAddToCart = () => {
//code that removes from cart the last added product
console.log("removed last added product from cart");
}
const addToCart = (item) => {
//some code
setSnackBarMessage("Item added to cart");
//HELP NEEDED HERE
//undoFunction = undoAddToCart; // this doesn't work at all (no error messages)
setUndoFunction(() => undoAddToCart()) // this executes undoAddToCart when addToCart is called and not on button press
setSnackBarVisible(true);
}
const addToFavorites = (item) => {
//some code
setSnackBarMessage("Item added to favourites");
//undoFunction = undoAddToFav ; // <== HELP NEEDED HERE
//setUndoFunction(() => undoAddToCart())
setSnackBarVisible(true);
}
const displaySnackBar = () => {
setSnackBarMessage("Some info");
setSnackBarVisible(true);
//this one has no "undo" button
}
//some other stuff
return (
//some other stuff that calls the actions above
<SnackBar snackBarMessage = {snackBarMessage} snackBarVisible = {snackBarVisible) undoFunction = {undoFunction}/>
);
};
I'd like this undo action to be optional.我希望此撤消操作是可选的。
export default const SnackBar = ({snackBarMessage, snackBarVisible, undoFunction}) => {
//some stuff
return (
<>
//some stuff - handle visibility, etc
//help needed here as well - how do I display the button only when the function prop is passed?
{undoFunction && <button onClick={undoFunction}>UNDO</button>}; //this doesn't work properly
<div>{snackBarMessage}</div>;
</>
);
};
I've tried useState, useCallback, useMemo, useRef to handle this and nothing seems to work.我已经尝试过 useState、useCallback、useMemo、useRef 来处理这个问题,但似乎没有任何效果。 This is my first cry for help here:)这是我第一次在这里求救:)
You must declare undoFunction
using useState
, ex by default null:您必须使用useState
声明undoFunction
,默认情况下为 null:
const [undoFunction, setUndoFunction] = useState(null)
And then use setUndoFunction(/* your new function here or null */)
.然后使用setUndoFunction(/* your new function here or null */)
。
It didn't work because if you don't use a state, React won't re-render changes.它不起作用,因为如果您不使用 state,React 将不会重新呈现更改。
The problem for your question starts from MainComponent
您问题的问题从MainComponent
开始
const [undoFunction , setUndoFunction ] = useState(null);
Since the value of undoFunction
is null, the button won't render at all in the child component.由于undoFunction
的值为 null,因此该按钮根本不会在子组件中呈现。 I mean this code.我的意思是这段代码。
{undoFunction && <button onClick={undoFunction}>UNDO</button>}; //this doesn't work properly
You can change it to something like this.你可以把它改成这样。 Render the button and execute undoFunction
if that's available.呈现按钮并执行undoFunction
如果可用)。
<button
onClick={() => {
if (undoFunction) undoFunction();
}}
>
UNDO
</button>
I have made a simple sandbox for this functionality.我为此功能制作了一个简单的沙箱。 I've used an extra button for passing undo functionality.我使用了一个额外的按钮来传递撤消功能。 Check the code and see how you can use.检查代码,看看如何使用。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.