钩子反应的问题

Question

我正在创建一个步骤，我正在使用一个钩子来绘画，但这给了我这个问题，如果我在 3 中，所有其他人都在画我，例如 4、5 等，我不希望这样

export default function Registration() {
  const [current, setCurrent] = useState(3)
      return (
    <div className="flex">
      <div className="flex flex-col justify-center">
        <div className="w-1 h-16 flex justify-center font-bold items-center">
          1
        </div>
        <div className="w-1 h-8 flex justify-center font-bold items-end">2</div>
        <div className="w-1 h-16 flex justify-center font-bold items-end">
          3
        </div>
        <div className="w-1 h-16 flex justify-center font-bold items-end">
          4
        </div>
        <div className="w-1 h-16 flex justify-center font-bold items-end">
          5
        </div>
      </div>
      <div className="w-10">
        {current === 1 ? (
          <div className="relative flex justify-center items-end">
            <div className="h-5 w-5 bg-cyan rounded-full absolute z-1"></div>
            <div className="w-1 h-10 bg-cyan"></div>
          </div>
        ) : (
          <div className="relative flex justify-center items-end">
            <div className="h-5 w-5 bg-cyan rounded-full absolute z-1">
              <BiCheck />
            </div>
            <div className="w-1 h-10 bg-cyan"></div>
          </div>
        )}
        {current === 2 ? (
          <div className="relative flex justify-center items-end">
            <div className="h-5 w-5 cirlce rounded-full absolute z-1" />
            <div className="w-1 h-16 cirlce"></div>
          </div>
        ) : (
          <div className="relative flex justify-center items-end">
            <div className="h-5 w-5 bg-cyan cirlce rounded-full absolute z-1">
              <BiCheck />
            </div>
            <div className="w-1 h-16 bg-cyan" />
          </div>
        )}
        {current === 3 ? (
          <div className="relative flex justify-center items-end">
            <div className="h-5 w-5 cirlce rounded-full absolute z-1" />
            <div className="w-1 h-16 cirlce"></div>
          </div>
        ) : (
          <div className="relative flex justify-center items-end">
            <div className="h-5 w-5 bg-cyan rounded-full absolute z-1">
              <BiCheck />
            </div>
            <div className="w-1 h-16  bg-cyan" />
          </div>
        )}
        {current === 4 ? (
          <div className="relative flex justify-center items-end">
            <div className="h-5 w-5 cirlce rounded-full absolute z-1" />
            <div className="w-1 h-16 cirlce"></div>
          </div>
        ) : (
          <div className="relative flex justify-center items-end">
            <div className="h-5 w-5 bg-cyan rounded-full absolute z-1">
              <BiCheck />
            </div>
            <div className="w-1 h-16 bg-cyan" />
          </div>
        )}
        {current === 5 ? (
          <div className="relative flex justify-center items-end">
            <div className="h-5 w-5 cirlce rounded-full absolute z-1" />
            <div className="w-1 h-16 bg-dark-15"></div>
          </div>
        ) : (
          <div className="relative flex justify-center items-end">
            <div className="h-5 w-5  bg-cyan rounded-full absolute z-1">
              <BiCheck />
            </div>
            <div className="w-1 h-16 bg-cyan" />
          </div>
        )}
      </div>
    </div>
  )
}

问题是，当我更改 useState(3) 时，它显示如下：

当它们应该是 3、4 和 5 时它们应该是灰色的

我想问一下如何通过按钮进行更改？

Answer 1

在您当前的示例中，您只检查它是否相等。

要检查它是否等于或大于您需要将 current === 1 更改为 current >= 1

要更改您为状态设置的current value you need to use the setter`

<button onClick={() => setCurrent(4)}>Set to 4</button>

（这是一种非常静态的方法，只是为了演示它是如何完成的）

要使其更具动态性，您可以添加一个函数来实现

const changeCurrnet = (dir) => {
    const tempCurrent = dir === "up" ? current + 1 : current - 1 
    setCurrent(tempCurrent )
}

<button onClick={() => changeCurrnet("up")}>Increase</button>
<button onClick={() => changeCurrnet("down")}>Decrease</button>

Answer 2

首先你想不通是因为你在conditional rendering中做的冗余元素太多了。例如第一个元素：

{current === 1 ? (
          <div className="relative flex justify-center items-end">
            <div className="h-5 w-5 bg-cyan rounded-full absolute z-1"></div>
            <div className="w-1 h-10 bg-cyan"></div>
          </div>
        ) : (
          <div className="relative flex justify-center items-end">
            <div className="h-5 w-5 bg-cyan rounded-full absolute z-1">
              <BiCheck />
            </div>
            <div className="w-1 h-10 bg-cyan"></div>
          </div>
        )}

您在两种状态下使用了相同的 3 个 div，您可以将其减少为：

<div className="relative flex justify-center items-end">
        <div className="h-5 w-5 bg-cyan rounded-full absolute z-1"></div>
        {(current != 1) && (<BiCheck />)}          
        <div className="w-1 h-10 bg-cyan"></div>
</div>

这之后调试就容易多了。所以，让我们关注主要问题，你需要电流和下面的圆圈来点亮。您只检查相等性，当且仅当状态等于其索引时，圆圈才会变亮。如果你想让它成为索引和所有更大的索引，那么你需要检查 >= 而不是 ===。您的最终代码可能如下所示：

<div className="relative flex justify-center items-end">
        <div className="h-5 w-5 bg-cyan rounded-full absolute z-1"></div>
        {(current >= 1) && (<BiCheck />)}          
        <div className="w-1 h-10 bg-cyan"></div>
</div>
<div className="relative flex justify-center items-end">
        <div className="h-5 w-5 bg-cyan rounded-full absolute z-1"></div>
        {(current >= 2) && (<BiCheck />)}          
        <div className="w-1 h-10 bg-cyan"></div>
</div>
<div className="relative flex justify-center items-end">
        <div className="h-5 w-5 bg-cyan rounded-full absolute z-1"></div>
        {(current >= 3) && (<BiCheck />)}          
        <div className="w-1 h-10 bg-cyan"></div>
</div>
<div className="relative flex justify-center items-end">
        <div className="h-5 w-5 bg-cyan rounded-full absolute z-1"></div>
        {(current >= 4) && (<BiCheck />)}          
        <div className="w-1 h-10 bg-cyan"></div>
</div>
<div className="relative flex justify-center items-end">
        <div className="h-5 w-5 bg-cyan rounded-full absolute z-1"></div>
        {(current >= 5) && (<BiCheck />)}          
        <div className="w-1 h-10 bg-cyan"></div>
</div>

要使用按钮进行更改，您可以在按钮上创建事件侦听器以更改状态，React 将根据新更改的状态再次渲染元素。

钩子反应的问题

problems with hook react

javascript

reactjs

react-hooks

use-state