react-sortable-hoc：リスト項目のクリックイベントの処理

Question

この質問は約https://github.com/clauderic/react-sortable-hocです。 私はReactにはかなり新しくなっています。だから、以下は少し刺激的です。 https://jsfiddle.net/7tb7jkz5/にアクセスしてください。通知行4

const SortableItem = SortableElement(({value}) => <li className="SortableItem" onClick={console.debug(value)}>{value}</li>); 

コードを実行すると、コンソールは「Item 0」を「Item 99」に記録します。アイテムをクリックすると同じものが記録されますが、は3つの回です。なぜこれが起こるのですか？そして、これは本当に必要か、バグのようなものですか？

私は通常のDOMと同様の動作を期待していたため、クリックイベントはクリックされたアイテムからバブルアップし、その祖先を通ってキャッチされる可能性がありました。観察された動作は、クリックイベントがリストによって3回各リスト項目に送られるように見えます。

更新： まあ、これは、実際には、Shubhamこれを指摘してくれてありがとう水晶のように明確です。私はリファレンスを指定するのではなく、式が評価されるたびに実行されるconsole.debugの実際の呼び出しを指定しました。よくある間違い。

まだ、これは、各リスト項目が1つクリックされると3回レンダリングされることを意味します。私は、最適化が欠落しているか、または無駄に再描画していると思われます。

Answer 1

あなたはonClickアクションをfunctionとして言及する必要があります。ハンドラ呼び出し内で() =>を使用してください。以下の方法を試してみてください。応答は非常に遅いですが、動作しますが、

const SortableItem = SortableElement(({value}) => <li className="SortableItem" onClick={() => console.debug(value)}>{value}</li>);