На нажатие и наведение курсора в том же компоненте реагировать?

Question

Я создаю таблицу. Я добавил onMonseUp и onClick в один и тот же компонент. Когда пользователь щелкает и перетаскивает ячейки, он открывает диалоговое окно. Но когда я щелкаю по ячейке, диалоговое окно не открывается. Я хочу, чтобы при наведении мыши на него открывалось диалоговое окно, а при нажатии на него также открывалось диалоговое окно

Вот мой код

export default function Table() {

    const [start, setStart] = useState(null);
    const [end, setEnd] = useState(0);
    const [selecting, setSelecting] = useState(false);
    const [isOpen, setIsOpen] = useState(false);

    let toggleModal = () => {
        setIsOpen(!isOpen);
    };

    let beginSelection = i => {
        setSelecting(true);
        setStart(i);
        updateSelection(i);
    };

    let endSelection = (i = end) => {
        setSelecting(false);
        updateSelection(i);
        toggleModal();
    };

    let updateSelection = i => {
        if(selecting) {
            setEnd(i);
        }
    };

    let cells = [];
        for(let j = 0; j < 12*4; j++) {
            cells.push(
                <Cell key={j}
                      inputColor={
                          (end <= j && j <= start || (start <= j && j <= end) ? "#adf": "")
                      }
                      onMouseDown={()=>beginSelection(j)}
                      onMouseUp={()=>endSelection(j)}
                      onMouseMove={()=> updateSelection(j)}
                      onClick={toggleModal}
                >
                    {j+1}
                </Cell>
            )
        }

    return (
        <TableCalendar>
            {cells}
            <Dialog onClose={()=> toggleModal()} show={isOpen} >
                Here's some content for the modal
            </Dialog>
        </TableCalendar>
    )
}

Вот мой полный код и демонстрационная версия: https://codesandbox.io/s/github/Kalipts/ReactMouseEvent

Пожалуйста, помогите мне. Спасибо

Answer 1

При нажатии будут вызваны onMouseDown и onMouseUp. Так что в вашем случае toggleModal вызывается дважды, в onMouseUp и onClick. Вот почему переменная вернется к своему значению.

Вы можете удалить onClick и просто позволить onMouseUp показать модальное значение, чтобы у вас также был правильный выбор. Вы также можете напрямую позвонить setIsOpen(true) в режиме onclick.

<Cell
  key={j}
  inputColor={
    (end <= j && j <= start) || (start <= j && j <= end) ? "#adf" : ""
  }
  onMouseDown={() => beginSelection(j)}
  onMouseUp={() => endSelection(j)}
  onMouseMove={() => updateSelection(j)}
  onClick={() => setIsOpen(true)}
>
    {j + 1}
</Cell>

Рабочая песочница: https://codesandbox.io/s/eager-spence-58q0o

Answer 2

Избавьтесь от onClick={toggleModal}. Это избыточно для toggleModal с onMouseUp через endSelection, и сделать это дважды - тоже самое, что и вовсе.

Answer 3

Удалите функцию toggleModal и выполните setIsOpen() напрямую.

import React, { useState } from "react";
import styled from "styled-components";
import Dialog from "./Modal";

const TableCalendar = styled.div`
  display: grid;
  grid-template-columns: repeat(12, auto);
  background-color: #2196f3;
  padding: 10px;
`;

const Cell = styled.div`
  background-color: ${props => props.inputColor || "rgba(255, 255, 255, 1)"};
  border: 1px solid rgba(0, 0, 0, 0.8);
  padding: 20px;
  font-size: 30px;
  text-align: center;

  -webkit-user-select: none; /* Chrome all / Safari all */
  -moz-user-select: none; /* Firefox all */
  -ms-user-select: none; /* IE 10+ */
  user-select: none;
`;

export default function Table() {
  const [start, setStart] = useState(null);
  const [end, setEnd] = useState(0);
  const [selecting, setSelecting] = useState(false);
  const [isOpen, setIsOpen] = useState(false);

  let beginSelection = i => {
    setSelecting(true);
    setStart(i);
    updateSelection(i);
  };

  let endSelection = (i = end) => {
    setSelecting(false);
    updateSelection(i);
    setIsOpen(true)
  };

  let updateSelection = i => {
    if (selecting) {
      setEnd(i);
    }
  };

  let cells = [];
  for (let j = 0; j < 12 * 4; j++) {
    cells.push(
      <Cell
        key={j}
        inputColor={
          (end <= j && j <= start) || (start <= j && j <= end) ? "#adf" : ""
        }
        onMouseDown={() => beginSelection(j)}
        onMouseUp={() => endSelection(j)}
        onMouseMove={() => updateSelection(j)}
        onClick={() => setIsOpen(true)}
      >
        {j + 1}
      </Cell>
    );
  }

  return (
    <TableCalendar>
      {cells}
      <Dialog onClose={() => setIsOpen(false)} show={isOpen}>
        Here's some content for the modal
      </Dialog>
    </TableCalendar>
  );
}