在React中的组件外部单击时更改状态
在React中，当组件的外部被点击时，我们可以通过以下步骤来更改状态：
- 首先，在组件的类定义中，需要初始化一个状态变量，可以使用
useState钩子函数来实现：
import React, { useState } from 'react';
class MyComponent extends React.Component {
constructor(props) {
super(props);
this.state = {
clicked: false
};
}
// ...
}或者，使用函数组件的方式：
import React, { useState } from 'react';
const MyComponent = () => {
const [clicked, setClicked] = useState(false);
// ...
}- 接下来，我们需要在组件的外部定义一个点击处理函数，以便在组件外部被点击时调用该函数。在该函数中，我们可以使用状态更新函数来更改状态：
class MyComponent extends React.Component {
// ...
handleClickOutside = () => {
this.setState({ clicked: true });
}
// ...
}或者在函数组件中：
const MyComponent = () => {
const [clicked, setClicked] = useState(false);
const handleClickOutside = () => {
setClicked(true);
}
// ...
}- 最后，在组件的外部，我们可以使用DOM事件监听来调用点击处理函数。例如，使用
addEventListener来监听点击事件：
class MyComponent extends React.Component {
// ...
componentDidMount() {
document.addEventListener('click', this.handleClickOutside);
}
componentWillUnmount() {
document.removeEventListener('click', this.handleClickOutside);
}
// ...
}或者，在函数组件中，可以使用useEffect钩子来实现相同的效果：
const MyComponent = () => {
const [clicked, setClicked] = useState(false);
const handleClickOutside = () => {
setClicked(true);
}
useEffect(() => {
document.addEventListener('click', handleClickOutside);
return () => {
document.removeEventListener('click', handleClickOutside);
};
}, []);
// ...
}这样，当在组件的外部单击时，点击处理函数会被调用，从而更改状态变量，React会自动重新渲染组件以反映状态的变化。
相关·内容
4回答
当我单击文件夹图标时，它会打开和关闭，因为showingProjectSelector属性处于设置为false的状态。this.state = { ownerAvatar, } className='fa fa-folder-open'>
&l
浏览 104提问于2018-02-08得票数 5
回答已采纳
我有一个名为Settings的组件，它包含一个变量(IsActive)，useState默认为true。在单击按钮时，我需要从该组件的外部更新变量(IsActive)的状态。该按钮不是此组件的一部分。如何在单击按钮时更改该变量的状态。文件Settings.tsx
import Rea
浏览 5提问于2020-03-19得票数 1
回答已采纳
2回答
我是React Redux的新手，我有一个显示消息的通知组件。我想在单击此关闭图标时隐藏此消息。。这是我的代码。请提个建议。
浏览 4提问于2016-11-18得票数 1
我试图根据组件的状态显示/隐藏组件，并希望在第三个组件中单击时更改它。//肚脐 constructor(props) {
super(props);<Outside><Notifications /></
浏览 0提问于2018-10-24得票数 0
回答已采纳
我很好奇为什么React更新了这个例子中的Child组件： console.log("Render Inner"); }
单击组件外部<
浏览 4提问于2016-11-27得票数 0
回答已采纳
我在用Material UI Buttons创建的reactjs中有3个按钮。Button variant="contained">Button 2</Button></> 当我点击其中一个时，它会改变它的颜色(比如蓝色)，而另一个会被重置为默认值，我该怎么做呢？
浏览 18提问于2020-04-16得票数 0
回答已采纳
2回答
我有一个带有输入的React组件，还有一个可选的“高级输入”：Hide Advanced...如果您单击“隐藏高级”，则底部的高级将消失，这将更改为“显示高级这很简单，而且运行良好，在状态中有一个showAdvanced键，它控制文本和是否呈现高级输入。但是，外部JS代码可能会更改advanced的值，在这种情况下，如果高级输入当前
浏览 4提问于2014-09-12得票数 6
回答已采纳
2回答
当在另一个子组件中单击按钮时，我需要在一个子组件中更改状态。这两个孩子都有相同的父组件。import A from "...";
render() {
<div>
浏览 1提问于2020-02-20得票数 2
回答已采纳
我写了一些代码来练习React。我希望有人解释为什么如果单击了clickChange的目标(h3)，状态就不会更新。下面是我的主要应用程序组件：import Prova from ".，导入并调用(并呈现)到主App组件中。现在，您可以看到，我设置了一个方法，clickChange，一旦单击</
浏览 1提问于2018-07-06得票数 0
回答已采纳
大家好，我正在尝试构建React上下文菜单组件，这是我的代码目前的样子：import React, { useRef, useEffectcontext-menu" onBlur={handleBlur}> </div> }下面是外部<
浏览 0提问于2020-03-19得票数 0
1回答
我是一个反应初学者，我不明白背后的道具和状态或setState的想法。我在javascript和节点方面有一些经验，节点上是否有类似的东西可以帮助我理解道具和状态的概念？
浏览 5提问于2017-05-21得票数 0
回答已采纳
2回答
import React, { useState } from "react";
const [name, setName] = useState("");button type="submit">Submit</button> </div>}
我将使用上面的代码来提出我的问题inp
浏览 15提问于2021-05-22得票数 0
我有一个名为reportsData的数组，然后我需要过滤它，生成一些复选框，每个复选框都有一个基于来自另一个数组(emittersData)的名称的标签，所以基本上我是这样设置的： const [searchUser</div> </li> })} )
} 在rea
浏览 69提问于2021-11-03得票数 0
My是一个包含主导航和辅助导航的标头。到目前为止，我只处理主要的导航，其中选择了大的部分的网站。状态被提升到主标头组件，而UpperMenu组件只接收事件侦听器和活动链接ID作为支持。问题是，在正确执行状态更改时，当执行安装时，状态将更改为初始值。这会导致CSS中的“眨眼”，这意味着视图被正确呈现，并在很短的一
浏览 1提问于2017-11-26得票数 2
回答已采纳
2回答
我想在单击BlackSpark时呈现RedSpark，但我不确定如何更改另一个组件中组件的状态。我知道如何在组件本身中设置状态，但是当我单击另一个组件时，如何影响另一个组件呢？class BlackSpark extends React.Component { re
浏览 4提问于2017-07-03得票数 1
回答已采纳
1回答
我有一个主干文件，在其中，我使用React.renderComponent呈现一个React.renderComponent (Timer)。但是，在react组件中，我有一个状态呼叫计数器。我想从主干文件中获取这个组件的状态。虽然我将一个props.model传递给计时器，但我可以在定时器内部修改这个道具，但这将使props.model中的数据
浏览 2提问于2015-10-20得票数 1
我有一个外部的(对组件)，可观察的对象，我想监听它的变化。当对象被更新时，它会发出更改事件，然后当检测到任何更改时，我希望重新修改组件。对于顶级React.render来说，这是可能的，但在组件中却不起作用(这有点道理，因为render方法只是返回一个对象)。={this.handleButtonClick.bind(this)}>
Cl
浏览 5提问于2015-06-03得票数 1008
回答已采纳
1回答
我有一个非常小的应用程序。它由一个输入元素和一个表组成。当按下表中的单元格时，输入元素将显示在表中按下的单元格。但是，我注意到，在输入元素中显示选定的单元格需要花费惊人的时间(0.3s)。然后我做了一些分析，并进行了console.logging，这是输出：
我仍然是一个反应的初学者，并想知道我正在监督什么样的设计模式这样的功能。我不
浏览 13提问于2021-12-28得票数 2
1回答
我正试图把道具从一个孩子传给爷爷奶奶，但我在实现这一点上遇到了一些困难。Import React, {useState} from 'react'; ...
export
浏览 5提问于2022-11-26得票数 0
我是ReactJS的新手。我需要将“占位符”设置为"State“，在onClicked或onFocus时，它最初设置为空/空，然后当它不专注时，它又返回到"State”。有人能帮我这个忙吗，我是很新的反应，所以任何帮助都会很感激。import React from "react";import { Contai
浏览 1提问于2019-02-12得票数 1
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
实时音视频
对象存储
即时通信 IM活动推荐
腾讯云开发者
