如何正确定义 onClick 事件？

Question

我尝试设置一个 onClick 事件以使用 tsx.react 打开一个弹性框。按钮和弹性框显示正确，但 vscode 显示 onClick 事件有问题。我不知道出了什么问题，但也许你可以。我是该领域的新手，并尝试了堆栈社区的一些想法，但对我没有用。

控制台告诉我必须分配“字符串”，但它也不起作用。

//Function to change visibility of the flexBox

document.getElementById("OpenProfiles") 
  .addEventListener("click", ProfilesOpn);

function ProfilesOpn () {
    var a = document.querySelectorAll(".ProfilesOpen")[0];
    var b = document.querySelectorAll(".ProfilesClose")[0];
    a.style.visibility = "hidden"
    b.style.visibility = "visible";
}

//the button code inside the flexbox 

<div className={"Profiles"}>
    <div className={"Profile1"}>
        <div className={"Profile1P"}></div>
        <h3 className={"ProfileH3"}>Profile1</h3>     
    </div>

    <div className={"Profile2"}>
        <div className={"Profile2P"}></div>
        <h3 className={"ProfileH3"}>Profile2</h3>     
    </div>

    <div className={"Profile3"}>
        <div className={"Profile3P"}></div>
        <h3 className={"ProfileH3"}>Profile3</h3>     
    </div>

    <div className={"Profile4"}>
        <div className={"Profile4P"}></div>
        <h3 className={"ProfileH3"}>Profile4</h3>     
    </div>

    <h3 className={"EndCoPro"}>Are you missing any profiles?</h3>

    <button id="OpenProfiles" onClick="return(ProfilesOpn());">
        <div className={"ProfilesOpen"}><img src={ProfilesOpen} alt="Open Profiles"/></div>
    </button>

</div>

//the code in sass for the styling 
.Profiles {
  position: absolute;
  display: flex;
  left: 0px;
  bottom: 0px;
  width: 300px;
  height: 900px;
  flex-direction: column;
  justify-content: flex-start;
  align-items: space-between;
  background-color: #292929;
  box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.2);
  border-top-right-radius: 25px;
  border-bottom-right-radius: 25px;
  visibility: hidden;
}

Answer 1

代码沙盒： https://codesandbox.io/s/dazzling-bouman-62hgi?file=/src/App.js:0-1850

以下是您尝试使用 React hooks 完成的 2 种方法：

ProfilesOpn 函数使用 ref 来设置 DOM 属性。

reactWayToShowCat 函数使用内部组件状态设置showCat 状态。

import React, { useState, useRef } from "react";
import "./styles.css";

export default function Explorer() {
  const a = useRef(null);
  const b = useRef(null);
  const [showCat, toggleShowCat] = useState(true);

  const ProfilesOpn = () => {
    a.current.style.visibility = "hidden";
    b.current.style.visibility = "visible";
  };

  const reactWayToShowCat = () => {
    toggleShowCat(!showCat);
  };

  return (
    <div className="Profiles">
      {Array(4)
        .fill("")
        .map((_, i) => {
          const num = i + 1;
          return (
            <div className={`Profile${num}`} key={num}>
              <div className={`Profile${num}P`}></div>
              <h3 className="ProfileH3">{`Profile${num}`}</h3>
            </div>
          );
        })}

      <h3 className="EndCoPro">Are you missing any profiles?</h3>

      <button id="OpenProfiles" onClick={ProfilesOpn}>
        <div className={"ProfilesOpen"} ref={a}>
          <img src="https://placekitten.com/200/300" alt="Open Profiles" />
          <p>
            Click to see solution that uses refs to accomplish what you were
            doing
          </p>
        </div>
      </button>

      <button id="CloseProfiles" onClick={reactWayToShowCat}>
        <div className={"ProfilesClose"} ref={b}>
          <>
            {showCat && (
              <img src="https://placekitten.com/200/300" alt="Close Profiles" />
            )}
            <p>
              Click to see one react way to show and hide the cat (no styling)
            </p>
          </>
        </div>
      </button>
    </div>
  );
}

原始代码中的主要问题是 onClick 需要使用以下语法设置：

<button id="OpenProfiles" onClick={ProfilesOpn}>

希望这会有所帮助！