单击时如何更改按钮的图标，按钮已具有单击事件答案

【问题标题】：How to change the icon of a button when it is clicked, button already has a on click event单击时如何更改按钮的图标，按钮已具有单击事件
【发布时间】：2022-01-19 21:32:51
【问题描述】：

我想在单击按钮时更改按钮上的图标，该按钮具有 onClick 事件以将产品添加到购物篮。

      <Button
          style={{ backgroundColor: "transparent" }}
          type="primary"
          icon={<img src={plusCart} />}
          onClick={addToBasket}
        />

【问题讨论】：

标签： html reactjs typescript

【解决方案1】：

const [buttonClicked, setButtonClicked] = useState(false);

const addToBasket = () => {
  ...
  setButtonClicked(true);
};

...

<Button
  ...
  icon={<img src={buttonClicked ? someIcon : plusCart} />}
  onClick={addToBasket}
/>

【讨论】：

如果这对您有用，请单击复选标记 (✓) 接受它。这样其他人就知道你已经（充分地）得到了帮助。另外，请参阅 stackoverflow.com/help/someone-answers。
我们如何为光标悬停执行此操作，在反应中更改悬停按钮的图标？？
@tiedantebreak 删除onClick 道具并尝试使用此道具onMouseEnter={() => setButtonClicked(true)} onMouseLeave={() => setButtonClicked(false)}
@tiedantebreak 让我知道它是否有效。
是的，谢谢

【解决方案2】：

您可以为此使用布尔状态，可能是这样：

const [buttonClicked, setButtonClicked] = useState(false);

const addToBasket = () => {
  setButtonClicked(true);
  // your code..

};

<Button
          style={{ backgroundColor: "transparent" }}
          type="primary"
          icon={buttonClicked ? <img src={otherIcon}/> : <img src={plusCart}/>}
          onClick={addToBasket}
        />

【讨论】：

我们如何为光标悬停执行此操作，在反应中更改悬停按钮的图标？ ——
查看这个答案：stackoverflow.com/questions/32125708/…

【解决方案3】：

如果按钮在useState钩子中被点击并且onClick改变这个状态，你可以存储信息：

const [clicked, setClicked] = React.useState(false)

return(
 <Button
          style={{ backgroundColor: "transparent" }}
          type="primary"
          icon={<img src={clicked ? plusCart : minusCart} />}
          onClick={(e)=>{
           setClicked(true);
           addToBasket(e);}}
        />
)

【讨论】：

我们如何为光标悬停执行此操作，在反应中更改悬停按钮的图标？ ——