reactjs - 单击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 图像颜色的任何想法（我的意思是当属性成功保存时）。

标签： reactjsreact-state-management

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");