通过'onMouseEnter'和'onMouseLeave'function制作hover function时，如何首先申请'onMouseLeave'function？

Question

你可能不明白标题，但我会解释问题是什么。

我正在尝试制作一些按钮。 按钮悬停时会发生变化。
当其他按钮悬停时，最初选择的按钮不会改变，但当其他按钮被选择时会改变。
如果您查看下面的代码或 codesandbox 链接，我认为您可以立即理解我的意思。

问题：
如您所见，我使用'onMouseOver' 和'onMouseLeave' function 来实现hover。
但是，当组件首次呈现时，如果单击一个按钮，其他按钮应该改变，但它不会改变。
我确定这是因为首先将鼠标输入到按钮时执行 'onMouseLeave' function。
所以，当我点击其他按钮时，第一个按钮不会改变，因为我没有输入它。
即使我在没有传递第一个按钮的情况下单击另一个按钮，我也希望它能够正常工作。
怎么修改啊？？

代码

import { useState } from "react";
import styled from "styled-components";

export default function App() {
  // declare hover state
  const [choonsik, setChoonsik] = useState(true);
  const [ryan, setRyan] = useState(false);
  const [apeech, setApeech] = useState(false);

  // declare click state
  const [isChoonsik, setIsChoonsik] = useState(true);
  const [isRyan, setIsRyan] = useState(false);
  const [isApeech, setIsApeech] = useState(false);

  // make click state true
  const clickChoonsik = () => {
    setIsChoonsik(true);
    setIsRyan(false);
    setIsApeech(false);
  };

  const clickRyan = () => {
    setIsChoonsik(false);
    setIsRyan(true);
    setIsApeech(false);
  };

  const clickApeech = () => {
    setIsChoonsik(false);
    setIsRyan(false);
    setIsApeech(true);
  };

  // make hover state true
  const trueChoonsik = () => {
    setChoonsik(true);
  };

  const trueRyan = () => {
    setRyan(true);
  };

  const trueApeech = () => {
    setApeech(true);
  };

  // make hover state false
  const falseChoonsik = () => {
    setChoonsik(false);
  };

  const falseRyan = () => {
    setRyan(false);
  };

  const falseApeech = () => {
    setApeech(false);
  };

  return (
    <Wrap
      choonsik={choonsik}
      ryan={ryan}
      apeach={apeech}
      isChoonsik={isChoonsik}
      isRyan={isRyan}
      isApeech={isApeech}
    >
      <div className="characterWrap">
        <ul className="characterWrap__list">
          <li className="characterWrap__card">
            <div
              onMouseEnter={() => {
                trueChoonsik();
              }}
              onMouseLeave={() => {
                falseChoonsik();
              }}
              onClick={() => {
                clickChoonsik();
              }}
              className={`characterWrap__choonsik ${
                choonsik || isChoonsik ? "active" : ""
              }`}
            >
              <div
                className={`choonsik ${choonsik || isChoonsik ? "active" : ""}`}
              />
              춘식이
            </div>
          </li>
          <li className="characterWrap__card">
            <div
              onMouseEnter={() => {
                trueRyan();
              }}
              onMouseLeave={() => {
                falseRyan();
              }}
              onClick={() => {
                clickRyan();
              }}
              className={`characterWrap__ryan ${
                ryan || isRyan ? "active" : ""
              }`}
            >
              <div className={`ryan ${ryan || isRyan ? "active" : ""}`} />
              라이언
            </div>
          </li>
          <li className="characterWrap__card">
            <div
              onMouseEnter={() => {
                trueApeech();
              }}
              onMouseLeave={() => {
                falseApeech();
              }}
              onClick={() => {
                clickApeech();
              }}
              className={`characterWrap__apeach ${
                apeech || isApeech ? "active" : ""
              }`}
            >
              <div className={`apeach ${apeech || isApeech ? "active" : ""}`} />
              어피치
            </div>
          </li>
        </ul>
      </div>
    </Wrap>
  );
}

const Wrap = styled.div`
  position: relative;
  width: 1000px;
  top: calc(50vh - 100px);

  .characterWrap {
    padding-bottom: 20px;
    margin: 0 auto;
    width: 100%;
    text-align: center;
  }

  .characterWrap__list {
    display: inline-flex;
    list-style: none;
  }

  .characterWrap__card {
    margin: 0 9px;
    text-align: center;
    float: left;
  }

  .characterWrap__choonsik {
    color: #999;
    font-size: 13px;
    position: relative;
    display: inline-block;
    cursor: pointer;
  }

  .characterWrap__choonsik.active {
    color: #333;
    font-size: 13px;
    position: relative;
    display: inline-block;
    cursor: pointer;
  }

  .characterWrap__ryan {
    color: #999;
    font-size: 13px;
    position: relative;
    display: inline-block;
    cursor: pointer;
  }

  .characterWrap__ryan.active {
    color: #333;
    font-size: 13px;
    position: relative;
    display: inline-block;
    cursor: pointer;
  }

  .characterWrap__apeach {
    color: #999;
    font-size: 13px;
    position: relative;
    display: inline-block;
    cursor: pointer;
  }

  .characterWrap__apeach.active {
    color: #333;
    font-size: 13px;
    position: relative;
    display: inline-block;
    cursor: pointer;
  }

  .choonsik {
    background-position: 0 17.647059%;
    background-size: 100%;
    display: block;
    transition: hover 0.2s;
    margin-bottom: 5px;
    background-image: url(https://www.kakaofriendsgolf.com/img/v3_img_sprites_friends@3x.png);
    background-repeat: no-repeat;
    width: 70px;
    height: 70px;
  }

  .choonsik.active {
    background-position: 0 11.764706%;
    background-size: 100%;
    display: block;
    transition: hover 0.2s;
    margin-bottom: 5px;
    background-image: url(https://www.kakaofriendsgolf.com/img/v3_img_sprites_friends@3x.png);
    background-repeat: no-repeat;
    width: 70px;
    height: 70px;
  }

  .ryan {
    background-position: 0 88.235295%;
    background-size: 100%;
    display: block;
    transition: hover 0.2s;
    margin-bottom: 5px;
    background-image: url(https://www.kakaofriendsgolf.com/img/v3_img_sprites_friends@3x.png);
    background-repeat: no-repeat;
    width: 70px;
    height: 70px;
  }

  .ryan.active {
    background-position: 0 82.352941%;
    background-size: 100%;
    display: block;
    transition: hover 0.2s;
    margin-bottom: 5px;
    background-image: url(https://www.kakaofriendsgolf.com/img/v3_img_sprites_friends@3x.png);
    background-repeat: no-repeat;
    width: 70px;
    height: 70px;
  }

  .apeach {
    background-position: 0 5.882353%;
    background-size: 100%;
    display: block;
    transition: hover 0.2s;
    margin-bottom: 5px;
    background-image: url(https://www.kakaofriendsgolf.com/img/v3_img_sprites_friends@3x.png);
    background-repeat: no-repeat;
    width: 70px;
    height: 70px;
  }

  .apeach.active {
    background-position: 0 0%;
    background-size: 100%;
    display: block;
    transition: hover 0.2s;
    margin-bottom: 5px;
    background-image: url(https://www.kakaofriendsgolf.com/img/v3_img_sprites_friends@3x.png);
    background-repeat: no-repeat;
    width: 70px;
    height: 70px;
  }
`;

代码沙盒

https://codesandbox.io/s/characterselect-4o6he0?file=/src/App.js

Answer 1

看着CodeSendbox。 看起来不错！

如果我理解正确的话，你的问题是当你点击任何其他图标而不是悬停在第一个图标上时，第一个图标不会变灰。

更改以下行

const [choonsik, setChoonsik] = useState(true);

到

const [choonsik, setChoonsik] = useState(false);