useState，设置图标活动和非活动答案

【问题标题】：useState, setting icon active and inactiveuseState，设置图标活动和非活动
【发布时间】：2021-04-17 06:16:10
【问题描述】：

大家好，我有以下代码：my code

我有两个 useStates，他们检查第一个是否为真，然后设置活动图标，如果为假，则设置非活动图标。

    const [icon, setIcon] = useState(false);
    const [v, setV] = useState(Viber);
     function handleClick() {
       setIcon(true);
       icon ? setV(Viber) : setV(ViberChecked);
       setIcon(false);
     }

    return (
        <div className="App">
          <img src={v} alt="icon" onClick={handleClick} />
        </div>
     );

我认为它以正确的方式工作，但它只工作一次，我怎样才能在所有点击后改变我的状态，我的意思是在点击后从非活动状态设置为非活动状态等等。它应该像这样复选框

请帮我解决这个问题，谢谢。

【问题讨论】：

标签： reactjs react-hooks use-state

【解决方案1】：

您可以更改您的代码：

import React, { useState, useEffect } from "react";
import "./styles.css";
import Viber from "./viber.svg";
import ViberChecked from "./viberChecked.svg";
export default function App() {
  const [icon, setIcon] = useState(true);
  const [v, setV] = useState(Viber);
  useEffect(() => {
    icon ? setV(Viber) : setV(ViberChecked);
  })
  // function handleClick() {
  //   setIcon(true);
  //   icon ? setV(Viber) : setV(ViberChecked);
  //   setIcon(false);
  // }
  return (
    <div className="App">
      <img src={v} alt="icon" onClick={() => setIcon(!icon)} />
    </div>
  );
}

【讨论】：

【解决方案2】：

您不能立即在挂钩中使用 var。可能会添加一个依赖于 icon 变量的 useEffect。

  useEffect(() => {
    // do your stuff
  }, [icon]);

【讨论】：

【解决方案3】：

您实际上将 icon 设置为 true，然后检查 icon 是否为 true，然后将 icon 设置为 false。这是为什么？在这种情况下，您的图标将始终为真

你可以这样做：（检查working sandbox）

function handleClick() {
       if(icon){
         setV(Viber)
         setIcon(false)
       }else{
         setV(ViberChecked);
         setIcon(true);
       }
     }

【讨论】：

【解决方案4】：

您正在点击图标以使其成为现实

  setIcon(icon => !icon)

或

<img src={v} alt="icon"  onClick={e => setIcon(!icon )} />

【讨论】：