在使用onClick()之前，如何保持禁用onClickOutside()方法？
在使用onClick()之前，可以通过以下方法来保持禁用onClickOutside()方法：
- 使用状态变量：在组件中定义一个状态变量，例如isClickOutsideDisabled，初始值为true。在onClick()方法中，将isClickOutsideDisabled设置为false，表示onClickOutside()方法可以执行。在onClickOutside()方法中，添加一个条件判断，只有当isClickOutsideDisabled为false时，才执行方法的逻辑。这样可以确保在onClick()执行期间，onClickOutside()方法被禁用。
- 使用标志位：在组件中定义一个标志位，例如isClickInside，初始值为false。在onClick()方法中，将isClickInside设置为true，表示当前点击事件是在组件内部触发的。在onClickOutside()方法中，添加一个条件判断，只有当isClickInside为false时，才执行方法的逻辑。在组件的其他地方，例如组件外部的点击事件处理函数中，将isClickInside设置为false。这样可以通过标志位来判断是否禁用onClickOutside()方法。
- 使用事件监听器：在组件的生命周期方法中，使用addEventListener()方法添加一个全局的点击事件监听器。在onClick()方法中，通过removeEventListener()方法移除点击事件监听器，禁用onClickOutside()方法。在onClickOutside()方法中，通过addEventListener()方法重新添加点击事件监听器，启用onClickOutside()方法。这样可以在onClick()执行期间，临时禁用onClickOutside()方法。
需要注意的是，以上方法只是一种实现思路，具体的实现方式可能会根据具体的开发框架和需求而有所不同。在实际开发中，可以根据具体情况选择最适合的方法来保持禁用onClickOutside()方法。
相关·内容
1回答
我有一个outsideAlerter组件，可以在我的站点的其他地方工作。我现在正在一个可重复的组件上使用它，由于某种原因，它正在清除我的状态，实际上破坏了我想要的结果。
下面是我的包装器组件，它检测您是否单击其子组件的外部。
import React, { useRef, useEffect } from "react";
/**
* Hook that alerts clicks outside of the passed ref
*/
function useOutsideAlerter(ref, onClickOutside) {
useEffect(()
浏览 7提问于2022-07-26得票数 0
回答已采纳
1回答
我在我的项目中使用了这个插件。
有一些道具showTimeSelect这个道具取得布尔值和隐藏或显示时间选择器。
我试图给用户关于选择时间选择器的选择权，所以我试着做一些onClick事件，并使这个属性有条件。
但有时是工作，有时不是..
我不明白问题出在哪里，下面是我的代码：
import React from "react";
import ReactDOM from "react-dom";
import DatePicker from "react-datepicker";
import "react-datepicker/dis
浏览 2提问于2019-11-06得票数 0
回答已采纳
嗨，我收到一个错误：
Type '{ children: Element; onClickOutside: () => void; }' is not assignable to type 'IntrinsicAttributes & PopUpWrapperProps'.
Property 'children' does not exist on type 'IntrinsicAttributes & PopUpWrapperProps'.ts(2322)
当我试图在<PopUpWrapper>
浏览 8提问于2021-12-15得票数 1
回答已采纳
一旦触发外部单击，我将尝试关闭打开的菜单。我设法在一个按钮上实现了它，但是现在由于我想要映射一个按钮列表，所以我无法打开任何按钮菜单。
import "./navbar.css";
import React, { useEffect, useRef, useState } from "react";
import { MenuItems } from "./menuItems";
export const Navbar = () => {
const [toggle, setToggle] = useState(true);
co
浏览 5提问于2022-07-18得票数 0
回答已采纳
我有一个弹出窗口，我想测试一下，当我按键盘上的ESC键时，弹出窗口是否会关闭。这个功能可以工作，但是我想让我的测试通过。我不知道如何在整个文档上模拟keyDown按下，而不仅仅是Modal弹出组件。
这是我现在的测试：
test("it should call the onKeyDown handler on key ESC press", () => {
const onKeydownSpy = jest.fn();
const component = mount(
<div id="wrapper">
浏览 0提问于2019-12-17得票数 0
当我试图使用"showMonthDropdown“或"showYearDropdown”选项时，我遇到了一个问题--数据报警器。
所有操作都很好，直到我单击日期选择器中的年份或月下拉列表，然后在控制台中得到此错误。
这是我的密码。
import "react-datepicker/dist/react-datepicker.css";
import DatePicker from "react-datepicker";
import { Controller } from "react-hook-form";
imp
浏览 17提问于2022-04-24得票数 1
2回答
我一直在尝试在我的系统中实现一个onclick模式关闭。我已经使用close按钮实现了一个模式onclick事件，但在模式之外单击时还没有成功完成
我已经尝试在div上添加onclick listener，但内容正在关闭，甚至在模式窗口中单击也是如此。
<div
className={"Overlay " + (this.state.hidden? "hidden": "show")}
id={this.props.id + "-container"} onCl
浏览 1提问于2019-05-27得票数 2
我有下拉和onSelect项目下拉应该关闭。
这是一个叫做onSelect的函数，但是认为状态isOpen: false是不会改变的，
但是状态部分：selected: option将被更改。
有人知道为什么吗？
onSelect = (option) => {
this.setState({ selected: option, isOpen: false }, () => {
this.props.onSelect(option);
});
};
下面是一个完整的组件：
import React from 'react';
impo
浏览 0提问于2020-01-20得票数 0
回答已采纳
我想不出答案，所以在搜索了很长一段时间后，我还是不明白，所以我会在这里尝试：
因此，我得到了一个包含元素的Popover函数组件(带有红色边框)和一个显示弹出本身的组件(图中的黄金边框)。
我需要的是获取PopoverContent的高度，以便根据Popover元素本身计算出它在屏幕上的位置。
更准确的说法是，我试图为PopoverContent实现一个Portal选项，这样就可以在DOM层次结构上不需要父组件切割就可以查看它。
Popover.tsx组件如下所示：
const Popover = (props: React.PropsWithChildren<PopoverProps&
浏览 20提问于2022-04-11得票数 0
我正在使用的书面反应，我试图访问这个包装器的功能，以了解何时用户点击离开。下面是它的自述文件中的用法：
// How to install: npm install react-onclickoutside --save
// load the High Order Component:
var onClickOutside = require('react-onclickoutside');
// create a new component, wrapped by this onclickoutside HOC:
var MyComponent = onClickOuts
浏览 2提问于2016-04-30得票数 0
回答已采纳
我有一个React组件，它在表单输入更新时使用状态来管理changed变量。 假设我已经对表单进行了一些更新，我遇到的问题是，如果我使用addEventListener向onCancel函数分派一个单击事件，则changed的值是不正确的，但是如果我从JSX调用onCancel，则该值是正确的。 有什么想法吗？ const Edit = (props) => {
let [changed, setChanged] = useState(false);
// Fired when a form value is updated
const onChange = (e) =&
浏览 30提问于2020-07-29得票数 0
我已经为我的web应用程序创建了一个下拉菜单，当我点击一个图标时，我正在打开我的下拉菜单。当我单击下拉菜单以外的任何位置时，我希望删除下拉菜单。当单击元素外部时，我的当前方法将删除该元素。但我不能打开下拉菜单时，点击图标之后。我怎么才能修好它？
class DropDown extends Component {
constructor(props) {
super(props);
this.myFunction = this.myFunction.bind(this);
this.state = {
op
浏览 2提问于2017-11-22得票数 2
回答已采纳
我想要在点击<Burger />或者点击<Burger />之外的地方时关闭菜单。使用我当前的代码，只有在<Burger />外部的单击将被处理，但在<Burger />上的单击将不会关闭菜单。
当我在handleClickOutside函数中将domNode反转为!domNode时，在<Burger />内部单击可以正常工作，但在<Burger />外部单击将不再关闭菜单。此外，我还尝试向handleClickOutside函数添加其他条件，但同样不起作用。
我遗漏了什么？
谢谢!
export class NavB
浏览 1提问于2020-04-28得票数 0
3回答
我使用了minDate={矩(新日期(‘1-01-1970’)}，但我能够选择1969年12月31日。在“反应日期选择器”中设置可选择前一个日期的任何分钟日期。我正在使用react datepicker npm链接。
任何解决办法。
<DatePicker
ref="drvDatePicker"
utcOffset={utcOffset}
className="date-picker"
popperClassName="drv-datepicker-popper"
onChange={input ?
浏览 2提问于2019-03-15得票数 2
回答已采纳
如何在单击“外部”或其他相同类型的div上删除元素的属性？这是我的密码：
HTML:
<div id="container">
<div data-something></div>
<div data-something></div>
</div>
JavaScript:
var elements = document.querySelectorAll("[data-something]");
Array.prototype.forEach.call(elements, f
浏览 3提问于2015-05-19得票数 4
回答已采纳
这是一个场景：
我正在用Jquery开发一个下拉小部件。我不得不说这很简单。
主要的问题是，当用户在我的小部件外部单击以使其隐藏其列表时，它会被捕获。我在这里找到了这段代码：
onClickOutside : function(event, e){
var thisObject = this;
var clickedOutside = true;
// check if the object itself or its parents are seoDropDown ones.
$(e).parents().andSelf().each(function () {
i
浏览 0提问于2010-07-11得票数 1
回答已采纳
请注意，如何以另一种方式重写此代码以避免下面的错误？
render() {
const { children, ...props } = this.props;
return <div {...props} ref={this.setRef}>{children}</div>
}
我知道这个错误：
标签上的未知道具onClickOutside。从元素中移除这个支柱。详情()
浏览 5提问于2017-09-13得票数 0
回答已采纳
当我使用事件侦听器单击我的元素时，我应该会显示弹出窗口，在我引入onClickOutside()之前，它工作得很好。使用ng-click-outside export class Component {
private isPopupDisplayed: boolean = false;
onClick() {
console.log('Clicked');
this.isPopupDisplayed = true;
}
onClickedOutside(event) {
this.isPopupDisplayed = fa
浏览 70提问于2019-02-09得票数 0
当点击Insert-button时，它会做它应该做的任何事情。但我不希望用户能够点击该按钮不止一次，因此，我想禁用它，一旦你按下它。
<asp:Button ID="Insert" runat="server" Text="Send" OnClick="Insert_OnClick"
OnClientClick="this.disabled=true; showLoading(this);" />
当将Insert_OnClick和"disable“组合在一起时，函数Insert_OnCl
浏览 3提问于2017-10-25得票数 0
回答已采纳
我正在创建一个自定义钩子来检测给定HTMLElement内部/外部的单击。
由于钩子接受函数作为参数，因此似乎需要将输入包装在useCallback中，或者用useRef存储在钩子中，以防止useEffect重复触发。
以下两种方法在功能上是否都是相同的？
方法1(首选)
// CALLER
useClickInsideOutside({
htmlElement: htmlRef.current,
onClickOutside: () => {
// Do something via anonymous function
},
});
// HOOK
const u
浏览 3提问于2020-09-02得票数 0
我正试图为一个下拉列表创建一个指令，只要我使用的是单一的，它就像一种魅力。我可以使用以下代码单击外部下拉列表：
@HostListener('document:click', ['$event'])
onDocumentClick(event: any): void {
console.log("document click");
// close
}
@HostListener('click')
onClick(): void {
console.log('click on ');
浏览 7提问于2017-12-07得票数 3
回答已采纳
1回答
我有一个按钮(h1)组件，它有一个onclick处理程序(handleDateLabelClick)，它改变状态以决定日历是否可见。如果工作正常，它应该将状态改为与当前相反的状态。当前，正确单击按钮将导致日历出现，但再次单击相同的按钮不会导致日历消失。我向handleDateLabelClick函数添加了一个控制台日志，以查看正在读取的内容，并且每次calendarOpen状态为false。当我在devtools中观察到状态正确运行时(打开时为true，关闭时为false )，这就更有趣了。下面是我的代码(BookCard是日历的父级)：
BookCard
const BookCard = (
浏览 3提问于2019-09-30得票数 1
回答已采纳
我试图在一个按钮中创建一个下拉列表--当单击该按钮时，下拉列表应该打开。我正试图通过点击外边把列表隐藏起来。当单击外部时，下拉列表实际上是关闭的，但在单击列表时也关闭了--这不是预期的。当单击列表内时，如何保持列表打开？stopPropagation对我来说不是一个好的解决方案，因为它破坏了单击事件的预期流。感谢你的帮助。
浏览 1提问于2018-12-17得票数 1
回答已采纳
我正在创建一个高阶组件来包装扩展接口的组件：
interface ClickOutsideInterface {
onClickOutside: (e: Event) => void
}
我创建的工厂期望有一个实现React.ComponentClass的ClickOutsideInterface
function clickOutside<P>(Component: React.ComponentClass<P> & ClickOutsideInterface){
return class ClickOutside extends
浏览 3提问于2017-10-29得票数 2
回答已采纳
我已经为每个产品渲染了一个弹出窗口，所以当有人点击图标时，弹出窗口就会出现。我现在面临的问题是，在点击任何产品时，所有的弹出窗口都是open.since，它是在地图功能中。我这里的要求是只打开与产品相关的弹出窗口，并关闭所有其他弹出窗口。
export default class index extends Component {
state = {
isPopoverOpen: false,
};
openPopup = () => {
this.setState({ isPopoverOpen: !this.state.isPopoverOpen }
浏览 29提问于2020-05-13得票数 0
1回答
我有一个子组件，当用户在函数外部单击时，它将关闭。我可以使用onclickoustide库检测外部的点击，但问题是，如果组件已经消失，我不希望组件的状态发生变化。这就是我检查css显示的原因。这一切都可以在handleClickOutside方法中看到。我没有改变显示，而是执行了console.log命令，以查看它是否正常工作。我的代码如下所示： import React, { useState, useEffect } from 'react';
import onClickOutside from 'react-onclickoutside';
func
浏览 46提问于2021-08-15得票数 0
回答已采纳
我不知道如何在我的组件导出中使用onClickOutside HOC来合成Redux…我试过这样的东西，但不起作用
export default compose(
connect(null, mapDispatchToProps),
onClickOutside)
(DropMenu, clickOutsideConfig);
我得到的错误：
TypeError: Cannot read property 'isReactComponent' of undefined
浏览 0提问于2020-03-24得票数 0
我正在编写一份国家预防机制一揽子计划，其依据是：
"peerDependencies": {
"react": "15.4.1",
},
"dependencies": {
"classnames": "2.2.5",
"react-onclickoutside": "5.8.3",
"styled-components": "1.1.2"
}
我已经将它们添加为对等依赖项。
我已经创建了一个webpack构建，我已经生
浏览 3提问于2016-12-27得票数 0
回答已采纳
4回答
我使用React 16和Redux，我使用的是this.setState func onClick。但它不能正常工作。我试着调试了几个小时，却找不到任何解决方案。这是我的密码；
import React, { Component } from 'react';
import PropTypes from 'prop-types';
class SSelect extends Component {
state = {
selectedName: '',
}
handleSelect = (id, nam
浏览 4提问于2018-01-08得票数 0
回答已采纳
我在ReactJS中使用EmojiPicker。如果我在EmojiPicker外部单击，我必须关闭它。该怎么做呢？我正在尝试使用onClickOutside，但我需要将EmojiPicker包装在其中，并添加特殊的方法来更改会话类的状态(isOpened为false)。因此，首先我必须将handleClickOutside方法添加到EmojiPicker中，这会将会话的状态(isOpened)更改为false。
下面是我的代码示例：
class Conversation extends React.Component {
constructor() {
super();
浏览 4提问于2016-10-01得票数 2
所以我在前面和JS合作，为客户建立一些东西。细节并不是非常重要，只是我没有访问节点的权限。
我使用unpkg在浏览器中包含各种NPM包(例如，React/ReactDOM/Babel )。这些包都有一个UMD构建，因此它们可以开箱即用。
但是，我想使用一些没有UMD构建的包(即react或)。我尝试通过unpkg和引用导出的模块来服务不同的文件。由于它们没有UMD构建，所以我将得到一个错误module is not defined，这是有意义的，或者我所指的模块是DatePicker is not defined。
所以我想也许我可以用browserify构建一个文件，但是我以前从未使用过它，
浏览 3提问于2017-11-30得票数 1
我有几个功能组件： export default function IconModal({
label,
icon,
className,
children
}) {
const el = useRef();
const [ isExpanded, setExpanded ] = useState(false);
const onClickOutside = useCallback(() => setExpanded(false), []);
const cx = classNames('modal__wrappe
浏览 7提问于2019-09-11得票数 2
回答已采纳
无法在chrome中禁用jquery中的图像按钮
在cshtml页面代码中：
@(Html.Telerik().Grid<object>().Name("testGrid").Columns(columns =>{
columns.Bound(item).ClientTemplate("<input type='text' width='20px' onchange=testGrid.OnPriceLockChange(this)' class='price' /><img sr
浏览 0提问于2012-08-30得票数 0
2回答
我有：
export default class List extends Component {
...
render() {
return <div>
...
<DropdownMenu text="Only show" isOpen={this.state.activeDropdown === "Only_show"} onClick={() => this.setState({ activeDropdown: "Only_show"})} inMenu={this.state.mouseInDrop
浏览 0提问于2019-02-12得票数 0
当我在当前页面上时，我想要高亮效果。例如，如果我在“关于页面”上，我会喜欢在导航栏中突出显示。
我该怎么做？
相关守则
NavBar.js
function NavBar() {
const [open, setOpen] = useState(false);
NavBar.handleClickOutside = () => setOpen(false);
return(
<nav>
<div className='navbar-container'>
浏览 3提问于2020-08-22得票数 1
我目前有一个功能组件，如下所示，其中我从useValues()钩子中生成了几个按钮。
const ButtonsWithModals = () => {
const [objects, loading] = useObjects() // `loading` is used in my `App` HOC
const [isModalOpen, setModalOpen] = React.useState()
const [modal, setModal] = React.useState([])
const ref = React.useRef()
fu
浏览 1提问于2020-08-20得票数 1
2回答
我有两个下拉传递作为道具的组件。我可以用单独的状态来控制这两种情况，但我认为这都可以用一种状态来完成吗？
报头
import React from 'react';
import DarkLabel from './DarkLabel';
import HeaderDropdown from './HeaderDropdown';
export default class Header extends React.Component {
componentWillMount() {
this.setState({
浏览 6提问于2016-05-20得票数 0
禁用按钮仍可捕捉长任务期间的单击。在长任务期间，按钮是灰色的，但是如果在长任务期间单击它，则在长任务完成后单击事件触发。例如：
def onClick(self, evt):
self.btn.Disable()
for i in range (1000):
print i
self.btn.Enable()
按钮在执行long for循环之前禁用自身，但是如果我们在for循环期间单击按钮，它将再次启动for循环，因为它在for循环结束后再次调用onClick函数。
知道如何禁用单击事件吗？
浏览 0提问于2018-10-24得票数 1
<h:commandButton styleClass="button" id="button_check" onclick="this.disabled=true;this.value='Please wait...';" action="#{pc_AMyBean.doCheckAction}" value="CHECK NOW"/>
此命令按钮执行onclick事件，但不调用操作。它是JSF 1.2。我的意思是，它禁用了按钮，但没有执行所需的操作。
如何防止用户两次提交表单？
浏览 0提问于2012-10-11得票数 0
似乎禁用按钮 "onclick“函数在触发程序时仍然会被触发，例如：
<div>
<input type="button" onclick="save()" id="saveButton" value="save" disabled="disabled" />
<input type="button" onclick="byPassDisabled()" value="bypass disabled button
浏览 4提问于2015-01-29得票数 15
回答已采纳
1回答
编辑：，我可以在选择的时候把它保存在后面，但是由于某种原因，它现在是不可拖的。我可能做错什么了？
我有能力上传一个图像从我的电脑，然后移动图像周围。My problem:当我选择图像时，它会向前弹出，直到我取消选择为止。它是否有可能让它保留在图片后面，我有它上传后？。你会注意到，如果你上传一个图像，图像弹出上方的框架-我希望它留在后面，当我移动它，但仍然看到控制。
提前感谢！
var canvas = new fabric.Canvas('c');
var oImg, oImg2, isImageLoaded;
//initialize default frame (l
浏览 0提问于2017-11-25得票数 4
回答已采纳
我有一个由3个按钮组成的集合，其中我需要为两个已禁用的按钮设置初始状态，然后为第三个按钮创建一个onClick事件，当单击这两个按钮时，该事件将启用这两个按钮。我正在考虑将禁用属性设置为状态，然后为onClick创建函数，该函数将两个按钮的状态作为目标，并将其设置为false。我现在的代码在下面，关于如何实现这一点有什么想法吗？
import React, { Component } from 'react';
import { render } from 'react-dom';
import { Button } from 'antd';
i
浏览 1提问于2019-04-01得票数 0
回答已采纳
当单击事件发生在onClickOutside包之外时，可以使用vueuse包中的ref函数触发
const imageRef = ref(null)
onClickOutside(imageRef, (event) => {
state.active = false
})
dom元素：
<img ... ref="imageRef"/>
但是有什么方法可以在两个dom元素上使用它吗？我想要的是，当用户单击两个元素的外部时，触发函数。我尝试在两个dom元素上添加相同的ref，但是ref只是被第二个元素覆盖。所述多姆元素是，而不是在v-for循环中呈现的
浏览 13提问于2022-11-18得票数 0
我正在尝试转换弹出窗口，因为它被召唤和关闭。 最初呈现为null，单击安装隐藏的组件，然后触发在CSS中定义的转换，将弹出窗口转换为视图。 在装载时，组件在文档上注册一个单击处理程序，并侦听弹出窗口之外的单击，以首先将其转换到视图之外，然后将其完全卸载，同时删除事件侦听器。 转换是通过更改组件的style属性触发的，但我也尝试使用className，它产生了完全相同的结果。 import { useRef, useState, useEffect } from 'react'
/*
* Popup
*
* - [x] auto-dismiss on click out
浏览 18提问于2019-04-03得票数 0
这个问题和我在标题中写的一样：“如何在单击后禁用ASPxButton以防止在前面代码侧使用javascript进行双击？”在asp.net中，我可以这样做：
<asp:Button ID="btnSubmit" runat="server" Text="Submit"
OnClick="btnSubmit_Click"
UseSubmitBehavior="false"
OnClientClick="this.disabled='true'; this.value='Pleas
浏览 5提问于2015-11-13得票数 1
我正在尝试延迟图像网格上弹出窗口的加载，但希望在发生这种情况时阻止单击其他图像的能力。但是，如果我关闭了onclick 'item.onclick = false'，当弹出窗口重新打开时，我似乎无法重新打开它？参见行'item.onclick = true‘。我也尝试过disabled = true/false，但没有用。有什么建议吗？ var caseStudies = document.querySelectorAll('.posterImage');
var caseHover = document.querySelectorAll('.
浏览 4提问于2021-03-26得票数 0
回答已采纳
5回答
我找到了这样的解决方案，但我的onclick事件已经绑定到一个代码隐藏处理程序：
MyButton.Attributes.Add("onclick", "this.disabled=true;" + Page.ClientScript.GetPostBackEventReference(MyButton, "").ToString());
onclick="this.disabled=true;__doPostBack('MyContrl$MyButton','');"
我的代码：
<asp
浏览 2提问于2011-06-22得票数 0
我想知道如何在初始化时增加nvidia-docker的超时限制。
当我的4-GPU服务器中有2台或更多的服务器处于繁忙状态时，总是会出现超时错误：
nvidia容器cli:初始化错误:驱动程序错误:超时
在发射码头时：
docker run --runtime=nvidia --rm nvidia/cuda nvidia-smi
提前感谢您的帮助！
浏览 0提问于2018-06-14得票数 0
回答已采纳
我的函数调用需要一些时间来产生显示，如果单击任何其他按钮，结果就会重叠，这并不是我们所希望的。我需要禁用所有的切换按钮，直到一个函数调用完成，包括重置按钮。另外，请任何人可以添加如何在渲染屏幕上显示我的函数运行时。我正在控制台窗口中获取时间，我需要将其显示在div下面的屏幕上。
return (
<div>
<button onClick={() => this.resetfunc()}>Reset</button>
<button onClick={() =
浏览 26提问于2021-03-07得票数 0
12回答
所以我有一个像这样的按钮：
<input id="Button" type="button" value="+" style="background-color:grey" onclick="Me();"/>
如何在需要的时候禁用和启用它？我已经尝试过disabled="disable"，但重新启用它是一个问题。我试着将它设置回false，但这并没有启用它。
浏览 0提问于2012-12-12得票数 320
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
实时音视频
对象存储
即时通信 IM活动推荐
腾讯云开发者
