如何正确定义 onClick 事件？

Posted 2023-03-13

【中文标题】如何正确定义 onClick 事件？

【英文标题】：How to define onClick event in react properly?

【发布时间】：2021-02-24 22:35:23

【问题描述】：

我尝试设置一个 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 /></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;

【问题讨论】：

如果您愿意，我可以将出现的问题的屏幕截图发送给您。如果您还需要其他东西，请告诉我。

感谢截图！使用 code/codesandbox 链接更新了答案。如果这对您有帮助，请投票/接受答案。

【参考方案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$numP`></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"  />
          <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"  />
            )
            <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>

希望这会有所帮助！

【讨论】：

是的，我找到你了，哥们i.stack.imgur.com/zqolC.png

嘿，伙计，我尝试了您的解决方案并且很安静，直到 vscode 向我显示一个错误，提示找不到 a 和 b。你知道如何解决这个问题吗？

嗯..是错误还是警告？ （你能附上截图吗？）如果是错误，我猜你需要将ref=a 添加到<div className="ProfilesOpen" ref=a> （或者尝试完全复制上面的代码，看看是否仍然存在错误 - 代码沙箱上没有错误）。如果是警告，您可能需要将 eslint-plugin-react 添加到您的项目或其他 eslint 设置调整。

您好，我按照您的建议构建它，但以下显示“对象可能为 'null'” 我还将安装 eslint-plugin-react 并将其发送给您的屏幕截图看起来像现在。谢谢你的帮助！ snipboard.io/nwG97t.jpg

啊，这是一个打字稿错误。这是因为我们在此处声明 ref 时默认为 null：const a = useRef(null);。我不每天使用 Typescript 进行工作，所以我不太熟悉，但我认为您可以这样设置它们：const a = useRef<htmlDivElement>(null); 这是一个解释如何更深入地修复的答案：***.com/a/55679953/8821119.