[解決済み] コンポーネントの外側のクリックイベントをリッスンする方法
2023-02-16 03:32:08
質問
ドロップダウンコンポーネントの外側でクリックが発生した場合、ドロップダウンメニューを閉じたいのです。
どうすればよいですか?
どのように解決するのですか?
要素に
mousedown
と
mouseup
のようにします。
onMouseDown={this.props.onMouseDown} onMouseUp={this.props.onMouseUp}
そして、親ではこうしています。
componentDidMount: function () {
window.addEventListener('mousedown', this.pageClick, false);
},
pageClick: function (e) {
if (this.mouseIsDownOnCalendar) {
return;
}
this.setState({
showCal: false
});
},
mouseDownHandler: function () {
this.mouseIsDownOnCalendar = true;
},
mouseUpHandler: function () {
this.mouseIsDownOnCalendar = false;
}
は
showCal
はブール値で
true
は、私の場合はカレンダーを表示し
false
はそれを隠します。
関連
-
[解決済み】React.jsの配列の子要素のユニークキーを理解する
-
[解決済み] Reactルータを使ったプログラムによるナビゲーション
-
[解決済み] React JSX内のループ
-
[解決済み] setStateを呼び出さずにReactコンポーネントを強制的に再レンダリングすることは可能ですか?
-
[解決済み] Reduxの非同期フローになぜミドルウェアが必要なのか?
-
[解決済み] Reactコンポーネントに条件付きで属性を追加するにはどうすればよいですか?
-
[解決済み] React jsのonClickはメソッドに値を渡すことができない
-
[解決済み] Reactコンポーネント外でのクリックを検出する
-
[解決済み] ReactJSで子コンポーネントから親コンポーネントにデータを渡すには?
-
[解決済み】 {this.props.children} に props を渡すには?}
最新
-
nginxです。[emerg] 0.0.0.0:80 への bind() に失敗しました (98: アドレスは既に使用中です)
-
htmlページでギリシャ文字を使うには
-
ピュアhtml+cssでの要素読み込み効果
-
純粋なhtml + cssで五輪を実現するサンプルコード
-
ナビゲーションバー・ドロップダウンメニューのHTML+CSSサンプルコード
-
タイピング効果を実現するピュアhtml+css
-
htmlの選択ボックスのプレースホルダー作成に関する質問
-
html css3 伸縮しない 画像表示効果
-
トップナビゲーションバーメニュー作成用HTML+CSS
-
html+css 実装 サイバーパンク風ボタン
おすすめ
-
[解決済み】React 17で動作するEnzymeアダプターはどれですか?
-
[解決済み】ReactJS: マテリアルuiのブレークポイントについて
-
[解決済み】Reactでclsxを使用する方法
-
[解決済み] ReactJsのCreateClassは関数ではない
-
[解決済み] React JS Jestで「SyntaxError: 予期しないトークン"
-
[解決済み] Webpack のコンパイルに失敗した
-
[解決済み] ReactJS - SCRIPT1010: 期待される識別子 - IE11 で本番ビルドが実行されない
-
[解決済み] validateDOMNesting警告React
-
[解決済み] React Router - バージョン更新後のwithRouterでTypescriptエラーが発生する。
-
[解決済み] componentWillReceivePropsライフサイクルメソッドはいつ使用するのですか?