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

【问题标题】：How to change image on button after click reactJs单击reactJs后如何更改按钮上的图像
【发布时间】：2020-06-17 07:49:09
【问题描述】：

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

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

【问题讨论】：

您能否包括使用的 CSS，即用于类 saveAction 和 ActionDiv，任何样式按钮。我认为您不能只“更改” png 文件的颜色，但您可以进行一些过滤/叠加。您还可以提供更清晰的预期结果吗？是在单击按钮后更改颜色，还是在一些成功状态值更新后？
@DrewReese 我想做类似的 facebook like 按钮只有边框，点击后充满颜色。我想让我的按钮一样，当有人点击保存时，成功后按钮上的心脏颜色必须改变一些颜色。

标签： reactjs react-state-management

【解决方案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");

【讨论】：

正是我在找这个。