useState，设置图标active和inactive

Question

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

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

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

我认为它以正确的方式工作，但它只工作一次，我如何在所有点击后改变我的状态，我的意思是设置非活动然后在点击后从非活动到活动所以 on.It 应该像复选框一样

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

Answer 1

您正在点击该图标使其变为现实

  setIcon(icon => !icon)

或

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

Answer 2

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

您可以改为这样做：（检查 working sandbox ）

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

Answer 3

您不能在挂钩中立即使用 var。也许添加一个依赖于图标变量的 useEffect。

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

Answer 4

您可以更改您的代码：

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

useState，设置图标active和inactive

useState, setting icon active and inactive

reactjs

react-hooks

use-state