reactでイベントハンドラを削除したい

Question

前提・実現したいこと

Reactを利用し、編集ボタンを押すと<p>タグを<input>に変更し、Blurで非同期通信にてタイトルを変更できるアプリを作成しております。
親要素にOnClickイベントを付与しているのですが、<input>に置き換わっている際には親要素のClickイベントは削除したいと考えております。
jQueryだと $(要素).off() にて対応可能かと思いますが、Reactではどのように実装すればいいのでしょうか？

該当のソースコード

...省略
export const ProjectContent = (props) => {

    const history = useHistory();

    const [isEditTitle, setIsEditTitle] = useState(false);
    const [title, setTitle] = useState(props.title)

    // Click時にページ遷移
    const handleClick = (id) => {
        history.push("/hogehoge/" + id)
    }

    const handleDelete = (id, e) => {
        e.stopPropagation();
        alert("削除してよろしいですか？")
        deleteProject(id)
        .then(p => {
            props.setProject(p);
        })
        .catch(e => {
            throw new Error(e);
        });
    }

    const handleChangeTitle = (e) => {
        e.stopPropagation();
        setIsEditTitle(true);
    }

    const handleChange = (e) => {
        e.stopPropagation();
        setTitle(e.target.value);
    }

    const handleBlur = (id, e) => {
        e.stopPropagation();
        if(e.target.name == "title")
        {
            const data = { "title": title };
            updateTitle(id, data)
            .then(p => {
                props.setProject(p);
                setIsEditTitle(false);
            })
            .catch(e => {
                throw new Error(e);
            });
        }
    }

    const renderTitle = () => {
        return (isEditTitle)
            ? <input type="text" name="title" value={ title } autoFocus={true} onChange={ (e) => handleChange(e) } onBlur={ (e) => handleBlur(props.id, e) } />
            : <p className="title">{ title }</p>;
    }

    return(
        <div className="project" onClick={ () => handleClick(props.id) } >
            <h2>{props.id}</h2>
            <div className="title-wrap">
                <div className="caption">
                    <p>タイトル</p>
                    <img src={ EditIcon } alt="編集アイコン" onClick={ (e) => handleChangeTitle(e) } />
                </div>
                { renderTitle() }
            </div>
            <div className="desc-wrap">
                <div className="caption">
                    <p>詳細</p>
                    <img src={ EditIcon } alt="編集アイコン" />
                </div>
                <p className="description">{ props.description }</p>
            </div>
            <img src={ DeleteIcon } alt="削除アイコン" className="delete-icon" onClick={ (e) => handleDelete(props.id, e) } />
        </div>
    )
}

Answer 1

方法は2つに1つです。

• onClickに指定する値を条件によって変えて、イベントが不要なときにはundefined（あるいは何もしない関数）を渡すようにする
• イベントハンドラ内で条件分岐して、無関係なときは何もせずに脱出する

Comments

[te_ff]

ご回答ありがとうございます！
下記の方と同じ内容だったため、同じ内容をコメントさせていただければと思います
---------------------------------------------------------------
handleClick内で条件分岐をしたのですが、動きが変わらなかったです。
console.logにて isEditTitle の中身を確認してみたのですが、Blurが動いた後にOnClickが動くため一瞬 isEditTitle でイベントが削除されますが、すぐに付与され動いてしまっているようです。
質問内容とは少し異なり申し訳ありませんが、何か対応方法ありますでしょうか？

```
const handleClick = (id) => {
console.log(isEditTitle)
// if(!isEditTitle){
// history.push("/videorelationlist/" + id);
// }
}
```
---------------------------------------------------------------

[maisumakun]

blurの前にclickが動いている、ということはありませんか？

[te_ff]

```
[onClick]
const handleClick = (id) => {
console.log('handleClick');
console.log(isEditTitle);
}
```

```
[onBlur]
const handleBlur = (id, e) => {
console.log('onBlur');
console.log(isEditTitle);
}
```
とすると下記表示されるためBlurから動いているかと思います
---------console---------
onBlur
true
handleClick
false
---------------------------

[maisumakun]

> isEditTitle でイベントが削除されますが、すぐに付与され動いてしまっているようです。

中で分岐してもイベントは「外れない」です。条件を満たさない場合は何もせずイベントハンドラを抜ければ、「イベントを付与していない」のと動作は変わりません。

[maisumakun]

（「動作しないイベントハンドラであっても付与したくない」のであれば、1番目の「onClickを条件指定する」方法をとってください）

[te_ff]

nekonikiさんと同じ記載方法で間違いないでしょうか…？
<div className="project" onClick={!isEditTitle? () => handleClick(props.id) : undefiend } >
こちらは試してみたのですが結果同じようです。。。

[maisumakun]

えっと、すでに「親要素にOnClickイベントを付与しているのですが、<input>に置き換わっている際には親要素のClickイベントは削除したい」という条件は満たしているのではないでしょうか？

（外側をクリックした瞬間にblurが先に動いて、「<input>に置き換わっている際」ではなくなってからonClickが動作しています）

[maisumakun]

つまり、「行いたい動作」が「実装しようとしている内容」と一致していないのではないか、ということです。

[te_ff]

すみません。
そうなります。
最初のコメントに記載した通り今現在の問題は少し変わっています。
一度こちらの質問は閉じ、新しく質問作成しなおします！
ありがとうございます！

Answer 2

isEditTitleで<p>と<input>の制御をしているので、
その値を使って一時的に親のonClickをundefiendにすればよいかと思います。

コメントを受けての追記

ご回答ありがとうございます！

handleClick内で条件分岐をしたのですが、動きが変わらなかったです。
console.logにて isEditTitle の中身を確認してみたのですが、Blurが動いた後にOnClickが動くため一瞬 isEditTitle でイベントが削除されますが、すぐに付与され動いてしまっているようです。
質問内容とは少し異なり申し訳ありませんが、何か対応方法ありますでしょうか？

回答の意図としてはhandleClickすら走らせないという認識です。

↓以下のように書いている箇所を

<div className="project" onClick={ () => handleClick(props.id) } >

isEditTitleがfalseの時のみhandleClickを行うようにするので

<div className="project" onClick={!isEditTitle? () => handleClick(props.id) : undefiend } >

にするというイメージです。

Comments

[te_ff]

ご回答ありがとうございます！
handleClick内で条件分岐をしたのですが、動きが変わらなかったです。
console.logにて isEditTitle の中身を確認してみたのですが、Blurが動いた後にOnClickが動くため一瞬 isEditTitle でイベントが削除されますが、すぐに付与され動いてしまっているようです。
質問内容とは少し異なり申し訳ありませんが、何か対応方法ありますでしょうか？

```
const handleClick = (id) => {
console.log(isEditTitle)
// if(!isEditTitle){
// history.push("/videorelationlist/" + id);
// }
}
```

[te_ff]

追記に対してのコメントになります。
<div className="project" onClick={!isEditTitle? () => handleClick(props.id) : undefiend } >

こちらも試してみたのですが、結果は同じようです。。。

[nekoniki]

となると、親要素を`rerun`の中に書くのではなくて、あらかじめ変数で宣言しておき、
- `isEditTitle`が`true`なら`onClick`なしの`div`
- `false`なら`onClick`ありの`div`
として書く必要があるかと思います。

[maisumakun]

> こちらも試してみたのですが、結果は同じようです。。。

本当に同じですか？（スペルミスがあるので、そのまま実行すればエラーになるかと思うのですが、そうすらなっていないということでしょうか？）

[te_ff]

undefiend → undefined　で間違いないでしょうか？

また、
>となると、親要素を`rerun`の中に書くのではなくて、あらかじめ変数で宣言しておき、
>- `isEditTitle`が`true`なら`onClick`なしの`div`
>- `false`なら`onClick`ありの`div`
>として書く必要があるかと思います。
こちらも同じでした。。
やはりBlur後にClickが動いているためかと思います。
Blurの中にClickがあると同時に動かないとの記事はたくさん出てくるのですが、、、