2.12.3
MAC、Chrome 61、
https://codepen.io/anon/pen/EvKmNO?editors=001
\ 、\ 、および\要素をクリックしながら、コンソールを見てCodepenサンプルの動作を確認してください。
放出されたイベントのターゲットプロパティは常に\である必要があります
イベントは、ターゲットを他の要素(子要素)に設定してトリガーされます
ボタンのテキストやアイコンをクリックすると、イベントのターゲットプロパティが要素ではなく\または\要素に変更されます
バグだと思います...修正するためのPRをお願いします。
確かに、今週はPRをしようと思います:+1:
@benjycuiイベントターゲットを常にbutton要素に設定する必要がある理由がよくわかりません。 イベントのターゲットは、イベントが発生した要素である必要があります。
@jddxf正確に、あなたはをクリックすると<Button/>
あなたは関係なく、どの部分に、それはターゲットとして渡されることを期待<Button/>
あなたは上をクリックします。 (これは、モジュールとコンポーネント、一連の入力、および一連の一貫した出力の完全な約束です)
これで、Buttonコンポーネントの内部に<span/>
または別の要素が含まれる可能性があります(これは、内部にあることを誰も知らないため使用できません。文字通り内部にあります)。これらの要素はラッパーであるか、非表示または統合されている可能性があります。 <Button/>
。 同じボタンをクリックすると、毎回異なる動作をすることを想像してみてください。これは、 Button
内の非表示のspan
をクリックしたときと、 Button
自体をクリックしたときだけです。確かに一貫性がないか、望まれていません。
したがって、要点として、 Button
要素がクリックされたときは、イベントターゲットを常にボタンに設定する必要があります(サブコンポーネントと要素はクリックスルーである必要があります)
@ mim-Armandあなたの主張を理解しました。 IMO、コンポーネントレベルの一貫性を提供したい場合は、コールバックの引数としてButton
インスタンスを提供する方がよい場合があります。 引数がEvent
(より具体的にはReact.SyntheticEvent
)インスタンスである場合、そのターゲットは実際のイベントターゲットであり、domレベルの一貫性を提供すると思います。
補足として、 event.currentTarget
いつでもbutton
を参照できます。
最も参考になるコメント
@ mim-Armandあなたの主張を理解しました。 IMO、コンポーネントレベルの一貫性を提供したい場合は、コールバックの引数として
Button
インスタンスを提供する方がよい場合があります。 引数がEvent
(より具体的にはReact.SyntheticEvent
)インスタンスである場合、そのターゲットは実際のイベントターゲットであり、domレベルの一貫性を提供すると思います。補足として、
event.currentTarget
いつでもbutton
を参照できます。