单击reactJs后如何更改按钮上的图像

Question

我有一个带有图像（边框图标）的保存按钮。我想在按钮点击成功时更改图标颜色

const saveClickProperty = () => {
    console.log("test");
    if(userId) {
        setLoading(true);
        propertyUserSave({
            userId: userId,
            propertyId: property._id
        }).then((resp) => {
            console.log("hello");
            openNotification("", "Property Saved");
            if (isSuccess(resp)) {
                console.log("inside");
                openNotification(userMessage.successHeader, userMessage.propertySaved);  
            }
        }).finally(() => setLoading(false));
    }
}

我想改变save.png

<div className="saveAction">
                {userId && 
                    <a onClick={saveClickProperty} className="">
                        <div className="ActionDiv">
                            <img src="/images/index/save.png" alt="save" /> {' '} Save
                        </div>
                    </a>
                }

            </div>

现在看起来像

点击按钮后更改 save.png 图像颜色的任何想法（我的意思是当属性成功保存时）。

Answer 1

一个可能的解决方案是创建一个状态并在属性保存后更改该状态，以便组件（图标颜色和图像）重新呈现。

州示例：

const [success, setSucess] = useState(false);

图片示例：

const sucessImage = <img src="/images/index/NEWIMAGE.png" alt="save" />;
const defaultImage = <img src="/images/index/save.png" alt="save" />;

    <div className="saveAction">
                    {userId && 
                        <a onClick={saveClickProperty} className="">
                            <div className="ActionDiv">
                                ${success ? sucessImage : defaultImage} {' '} Save
                            </div>
                        </a>
                    }

                </div>

改变状态的例子：

...
        }).then((resp) => {
            setSucess(true);
            console.log("hello");
            openNotification("", "Property Saved");

单击reactJs后如何更改按钮上的图像

How to change image on button after click reactJs

reactjs

react-state-management