Как правильно определить событие onClick в реакции?

Я попытался установить событие onClick, чтобы открыть flexbox в реакции с помощью tsx. Кнопка и гибкий блок отображаются правильно, но 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;
}

react-native typescript html sass tsx
person Nils OS    schedule 12.11.2020    source источник
comment
Если вы предпочитаете, я могу отправить вам снимок экрана с обнаруженной проблемой. Просто дайте мне знать, если вам что-нибудь понадобится.   -  person Nils OS    schedule 13.11.2020
comment
Спасибо за скриншот! Обновлен ответ со ссылкой на код / ​​коды и ящик. Пожалуйста, проголосуйте за / примите ответ, если это вам помогло.   -  person Chris Bradshaw    schedule 13.11.2020

Ответы (1)


arrow_upward
0
arrow_downward

Песочница кода: https://codesandbox.io/s/dazzling-bouman-62hgi?file=/src/App.js:0-1850.

Вот два подхода к тому, чего вы пытаетесь достичь с помощью перехватчиков реакции:

Функция ProfilesOpn использует ссылку для установки свойств 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}>

Надеюсь это поможет!

person Chris Bradshaw    schedule 12.11.2020
comment
да, конечно, я нашел тебя, приятель i.stack.imgur.com/zqolC.png - person Nils OS; 13.11.2020
comment
Привет, приятель, я попробовал твое решение и хорошо с ним работал, пока vscode не покажет мне ошибку, в которой говорится, что a и b не могут быть найдены. Вы знаете, как это исправить? - person Nils OS; 13.11.2020
comment
Хм .. это ошибка или предупреждение? (можете ли вы включить снимок экрана?) Если это ошибка, я предполагаю, что вам нужно добавить ref={a} в <div className={"ProfilesOpen"} ref={a}> (или попробуйте точно скопировать приведенный выше код и посмотреть, есть ли по-прежнему ошибка - в песочнице кода ошибки нет). Если это предупреждение, возможно, вам придется добавить eslint-plugin-react в свой проект или другую настройку настроек eslint. - person Chris Bradshaw; 13.11.2020
comment
Привет, поэтому я создаю его, как вы рекомендовали, но следующее показывает, что объект, возможно, имеет значение «null». Я также установил eslint-plugin-response и пришлю вам скриншот того, как он выглядит прямо сейчас. Спасибо за вашу помощь! snipboard.io/nwG97t.jpg - person Nils OS; 13.11.2020
comment
Ах, это ошибка машинописного текста. Это потому, что мы по умолчанию устанавливаем для refs значение null, когда они объявлены здесь: const a = useRef(null);. Я не использую Typescript изо дня в день для работы, поэтому я не так хорошо знаком, но думаю, вы можете настроить их так: const a = useRef<HTMLDivElement>(null); Вот ответ, объясняющий, как более подробно исправить: stackoverflow.com/a/55679953/8821119. - person Chris Bradshaw; 13.11.2020
comment
Хорошо, теперь кнопка отображается и доступна для нажатия, но когда кнопка нажата, она просто исчезает и не меняет видимость гибкого бокса. Я попытался скопировать ваш пример, который работал нормально, но я не знаю проблемы с моим кодом, и мне очень жаль, что я беспокою вас всеми моими сообщениями. - person Nils OS; 13.11.2020