Reactで、マウスでドロップする際にも、onClickが発火してしまう

Question

前提・実現したいこと

ここに質問の内容を詳しく書いてください。
reactで、react-rndを使用し、マウスでカードをドラッグアンドロップで移動と、クリックにてモーダルが開く仕組みを作ろうとしています。

発生している問題

クリックで、モーダルは開きますが、マウスでドロップする際にも、モーダルが開いていしまいます。

該当のソースコード

handelModal = (e) => {
    this.setState({
      showModal: !showModal,
    })
  }

render() {
return(
<Rnd
  position={{ x: this.state.x, y: this.state.y }}
  onDragStop={(e, d) => { this.setState({ x: d.x, y: d.y }) }}
  onClick={(e) => {
    this.handelModal(e)
    e.preventdefault()
    e.stopPropagation()
  }}
>
  001
</Rnd>);

試したこと

上記のように、e.preventdefault(),e.stopPropagation()を入れてみましたが、うまくいきません。
react-rndに関して調べてみましたが、exmapleの数が少なく、ほぼ英語なので応えまでたどり着きせんでした。 よろしくお願いします。

補足情報（FW/ツールのバージョンなど）

react-rnd: https://github.com/bokuweb/react-rnd

"react-rnd": "^9.0.4",

Answer 1

こんにちは

react-rnd の下記 issue

• onClick and drag callbacks getting executed together #168

に投稿されている、この回答 を参考に、以下を作成しました。

import React, { Component } from "react";
import { render } from "react-dom";
import { Rnd } from "react-rnd";
import Modal from "react-modal";
import "./modal.css";

const rndStyle = {
  display: "flex",
  alignItems: "center",
  justifyContent: "center",
  border: "solid 1px #ddd",
  background: "#f0f0f0"
};

class App extends Component {
  constructor(props) {
    super(props);
    this.state = { showModal: false, dragging: false };
  }

  handelModal = () => {
    const { showModal } = this.state;
    this.setState({
      showModal: !showModal
    });
  };

  onLocationClick = () => {
    console.log(this.state);
    if (this.state.dragging) return;
    this.handelModal();
  };

  onBoxDragStop = () => {
    const that = this;
    setTimeout(function() {
      that.setState({ dragging: false });
    }, 500);
  };

  onBoxDrag = () => {
    this.setState({ dragging: true });
  };

  componentDidMount() {
    Modal.setAppElement("body");
  }

  render() {
    return (
      <React.Fragment>
        <Modal
          isOpen={this.state.showModal}
          className="Modal"
          overlayClassName="Overlay"
          onRequestClose={this.handelModal}
        >
          Modal
        </Modal>
        <Rnd
          style={rndStyle}
          default={{
            x: 0,
            y: 0,
            width: 320,
            height: 200
          }}
          onDragStop={this.onBoxDragStop}
          onDrag={this.onBoxDrag}
        >
          <div
            style={{
              height: "100%",
              width: "100%",
              textAlign: "center",
              paddingTop: 150,
              fontSize: 24
            }}
            onClick={this.onLocationClick}
          >
            react-rnd
          </div>
        </Rnd>
      </React.Fragment>
    );
  }
}

render(<App />, document.getElementById("root"));

上記のコードを以下にて動作確認することができます。

• 動作確認用 CodeSandbox: https://codesandbox.io/s/q223699-c55hf

これは、react-rnd のサンプル　をベースとして、ドラッグ対象のエリアをクリックすると、 react-modal によるモーダルが表示されるようにしたものです。モーダルを消去するには、モーダルの外側をクリックするか、ESCキーを押します。

以上、参考になれば幸いです。

Comments

[action_moto]

丁寧で、的確な回答ありがとうございます！！
次回の際は、なるべくコード全体を載せるよう気をつけたいと思います。

if (this.state.dragging) return;を挿入することで、ドラッグしていない間（this.state.dragging:false)だけクリックすればモーダルが開くようにしているが、　しかしそれだけだとドラッグをやめた際にも、this.state.dragging:falseの状態なのでモーダルが開いてしまう。そこで、setTimeoutでthis.state.dragging:trueをしばらく維持することで、モーダルが開かない仕組みになっているんですね！

if (this.state.dragging) return;の理解も甘かったので、とても勉強になりました。

ありがとうございました！

[jun68ykt]

どういたしまして！
> ・・・仕組みになっているんですね！
はい、そうです。setTimeoutでちょっと時間をおくところなどはトリッキーですが、理解できてしまえば、なかなか上手い手だなと、しっくりきますね。