同じコンポーネントをクリックし、マウスアップでで反応しますか？

kalipts：

私はtable.Iが、それはダイアログを開き、セルを同じコンポーネント.WhenユーザーがクリックするとドラッグでonMonseUpとのonClickを追加構築しています。しかし、ときに私の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

私を助けてください。感謝

Rieljun Liguid：

あなたは、をクリックした場合onMouseDownとonMouseUp呼び出されます。だからあなたの場合には、toggleModalには、2回呼び出され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