如何使用useState更新单击的元素
useState是React中的一个Hook，用于在函数组件中添加状态。它接受一个初始值作为参数，并返回一个包含当前状态值和更新状态值的数组。
要使用useState更新单击的元素，可以按照以下步骤进行操作：
- 首先，在函数组件中导入useState Hook：
import React, { useState } from 'react';- 在组件中定义一个状态变量和更新状态的函数。可以使用数组解构来获取useState返回的数组元素：
const [clickedElement, setClickedElement] = useState(null);上述代码中，clickedElement是当前状态值，setClickedElement是更新状态值的函数。初始值为null。
- 在需要更新元素的地方，使用setClickedElement函数来更新状态值。例如，当用户单击某个元素时，可以将该元素作为参数传递给setClickedElement函数：
const handleClick = (element) => {
setClickedElement(element);
}- 在组件的JSX中，将点击事件绑定到需要更新的元素上，并调用handleClick函数：
<div onClick={() => handleClick('Element 1')}>Element 1</div>
<div onClick={() => handleClick('Element 2')}>Element 2</div>在上述代码中，当用户单击"Element 1"或"Element 2"时，会调用handleClick函数，并将相应的元素作为参数传递给setClickedElement函数，从而更新clickedElement的值。
这样，通过useState和相关的事件处理函数，可以实现对单击元素的更新。
推荐的腾讯云相关产品：腾讯云云服务器（CVM）和腾讯云函数（SCF）。
相关·内容
1回答
为什么传递给memo的属性没有存储值
javascript、reactjs、react-hooks、use-state、react-memo
我正在尝试使用手动道具比较的React memo功能来优化我的React列表渲染。我已经生成了一个简单的“切换”按钮列表：
import React, { useState } from "react";
import "./styles.css";
import { Toggle } from "./Toggle";
export default function App() {
const [list, setList] = useState({ a: true, b: true, c: true });
const handleC
浏览 16提问于2020-05-14得票数 1
回答已采纳
1回答
没有回调的事件处理程序的useState
javascript、reactjs
在以下守则中：
import { StrictMode } from "react";
import { createRoot } from "react-dom/client";
import React, {
useState,
useEffect,
useMemo,
useRef,
useCallback
} from "react";
const App = () => {
const [channel, setChannel] = useState(null);
const handleClick
浏览 6提问于2022-06-15得票数 1
回答已采纳
1回答
为什么两个按钮都要重新渲染？
javascript、reactjs
在下面的程序中，当我单击任何按钮时，另一个按钮也会重新呈现，即使我已经使用了React.memo()。此外，只有其他按钮得到重新呈现，而不是其他计数。为什么？我有这样一个父组件：
import React, { useState } from 'react'
import Count from './Count'
import Button from './Button'
import Title from './Title'
function ParentComponent() {
const [age, setAge
浏览 2提问于2021-01-25得票数 1
1回答
如果我有多个(axios)回调来改变数组的状态，那么如何处理响应状态呢？
javascript、reactjs、react-hooks、axios
我目前正在构建一个反应性组件，用户可以在其中上传图像。在这个简化的例子中，我想上传3张图片。当每个文件的上传完成后，我想将这个文件添加到我上传的文件列表中。
问题:因为useState的setter方法不是同步的，所以我们只将三个上传的文件中的一个添加到列表中。另外两个添加会被最后一个上传文件覆盖。
这里的例子是：
const Example = () => {
const defaultValues = ["aaa.jpg", "bbb.jpg", "ccc.jpg"];
const [uploadedFiles, setUp
浏览 1提问于2022-11-23得票数 0
回答已采纳
1回答
如何在react中将项目添加到购物车页
javascript、reactjs、react-router
当用户单击add to cart按钮时，我尝试将项目添加到购物车页面。
import React from "react";
import "bootstrap";
import { useParams } from "react-router-dom";
function ItemDetail(handleClick) {
const params = useParams();
let { productCode, vendor, value} = params;
let item = {productCode, vendor,
浏览 5提问于2022-04-19得票数 2
回答已采纳
1回答
将状态重置为初始值，而不是最近更新的
javascript、reactjs、react-hooks
正如在随后的重新呈现过程中在中提到的，useState返回的第一个值始终是应用更新后的最新状态。但是，我有一个用例，在这个用例中，在随后的重新呈现过程中，状态需要重新初始化为道具中提供的初始值。
将此示例视为我的用例的简化版本：
import React from "react";
import "./styles.css";
function Counter({ initialCount, handleChange }) {
const [count, setCount] = React.useState(initialCount);
const
浏览 2提问于2020-09-07得票数 1
回答已采纳
1回答
使用自定义钩子在状态更新时不重新呈现UI
reactjs、react-hooks
我在我的自定义React钩子useGame中使用了useState，并且我非常肯定自定义钩子中的更新状态会触发使用钩子的每个组件的重新呈现，但是事实证明它不是这样工作的。
useGame hook
export const useGame = () => {
const [stage, setStage] = useState(STAGE.START);
const [minValue, setMinValue] = useState(DEFAULT_MIN);
const [maxValue, setMaxValue] = useState(DEFAULT_MA
浏览 10提问于2022-11-06得票数 0
回答已采纳
1回答
在反应中隐藏/显示元素
javascript、reactjs
因此，我有一段代码，其中Header.jsx文件中有一个按钮，一旦单击，它将显示Notification.jsx文件的内容。这里的问题是，我不知道如何在index.js中显示index.js的内容。我尝试使用条件语句，但没有效果，单击按钮后是否可以隐藏h1元素？
Header.jsx
import React from "react";
import { Button } from "@mui/material";
import { IconButton } from "@mui/material";
import NotificationsIc
浏览 10提问于2022-03-15得票数 1
2回答
如何确定用户是否在react中的输入字段中输入了任何值
javascript、reactjs、react-hooks、react-bootstrap
如何确定用户是否在react中的输入字段中输入了任何值。
我试图实现的是，当用户将文本/整数输入到卡内的一个输入字段而不单击“保存”按钮时，我想在卡片周围显示一个边框。
因此，边框应该添加到卡片中，其中至少包含一个未保存的输入字段，并且还更改了输入字段。
我正在使用以下链接中提到的动态形式。
这是如何构造我的动态表单的链接(示例代码)：
Dynamic是一个表单中继器，当我单击“添加一个新行”按钮时。新卡将被添加到react页面。
此新卡将具有相同的字段集，并具有相同的默认值。当用户更改卡中的任何输入字段时。需要在卡片上加一个边框。如果用户单击“保存”按钮，则应该保存输入字段。
当对卡的单个
浏览 5提问于2022-05-04得票数 2
回答已采纳
我只是从一些课程中学习了React，所有的课程都是建立在类组件和常见的this.setState上的，没有挂钩。如果没有React钩子，并且使用类组件而不是函数组件，这段React代码会是什么样子？代码本身实现了左边栏，它在你按下按钮后向左爬行。 const Sidebar = ({onClick, show}) => (
<div id="mySidebar" className={`sidebar ${show ? 'show' : ''}`}>
<a href="#" className
浏览 13提问于2019-09-12得票数 0
回答已采纳
1回答
为什么React钩子在其余代码执行之前触发重呈现？
javascript、reactjs、use-state
我试图找出在使用useState钩子更新状态时何时发生重呈现。在下面的代码中，单击按钮将触发包含一个handleClick函数的setTimeout函数。setTimeout内部的回调在1秒后执行，通过调用setCount更新状态变量计数。控制台日志然后打印一条消息。
在单击按钮后，我希望控制台日志显示的顺序是：
'Count in update'，0'Count post update in setTimeout'，0'Count in render'，1
但是，在运行此代码之后，我看到的顺序是：
'Count in update
浏览 6提问于2022-01-28得票数 4
回答已采纳
1回答
单个产品详细信息页是否会与产品列表显示在同一页上？
reactjs、react-hooks、react-router
我的任务是使用react创建我们的在线商店。到目前为止，我已经成功地使用我们正在开发的API中的数据调用了我们的产品，并且我还能够使用链接将数据从映射的产品列表传递到单个产品页面。
现在唯一的问题是，当用户单击产品列表时，我们希望单个产品出现在与产品列表相同的页面上，可能是作为出现在产品列表之上的组件(而不是链接到单独的页面)。在我的生活中，我似乎找不到一种方法，这样做不会导致错误或应用程序读取参数为未定义。承认，我对此反应很新，所以有可能我错过了一些很明显的东西。
，这是ProductList.js
import React, { useState, useEffect } from
浏览 7提问于2022-08-02得票数 0
回答已采纳
2回答
这是我的React Hook： function Student(props){
const [open, setOpen] = useState(false);
const [tags, setTags] = useState([]);
useEffect(()=>{
let input = document.getElementById(tagBar);
input.addEventListener("keyup", function(event) {
if (event.keyCode =
浏览 43提问于2021-03-24得票数 0
回答已采纳
2回答
如何防止具有“位置:绝对”的孩子触发父母的“`onBlur`”事件？
javascript、reactjs
我有一个容器，它有两个子容器:一个输入字段和另一个div元素，它根据isActive的值有条件地呈现。我遇到的问题是，每当我单击子div时，就会触发onBlur。
我怎样才能防止这种情况发生呢？我已经尝试过e.stopPropagation()了，如下所示。另外，我尝试过将onBlur和onFocus迁移到容器div中，但这也不起作用。
import React from "react";
import "./styles.css";
export default function App() {
const [isActive, setIsAc
浏览 9提问于2022-03-18得票数 1
1回答
使用useEffect内部自定义钩子的set函数
reactjs、typescript、react-hooks
我创建了一个自定义钩子，该钩子根据不同类型的数据维护状态，如下所示：
import { useState, useRef, Dispatch } from 'react';
function useBackedState<TData, TBacking>(initialData: TBacking, converter: (backing: TBacking) => TData):
[
state: TData,
getBackingData: () => TBacking,
setData: Dispatch<TBacking>
浏览 7提问于2022-08-20得票数 0
回答已采纳
1回答
如何在每一行中添加类名而不影响其余行？
javascript、reactjs、jsx、array.prototype.map、class-names
如何在每一行中添加类名而不影响其余行
import React, { useState } from 'react';
import './testEfect.css';
const Test = () => {
const arrayTest = [
{
name: '11',
id: '11'
},
{
name: '22',
id: '22&
浏览 4提问于2021-02-17得票数 0
回答已采纳
1回答
钩子状态1后支柱状态
javascript、reactjs、react-hooks
我对道具如何与由钩子创建的状态交互有一个问题。
在下面的示例中，钩子中保持的状态总是在道具中定义的状态后面。
我想我理解为什么会发生这种事。生命周期似乎是这样的：
组件呈现
handleClick是通过访问基于此呈现的范围来定义的。
按钮被单击并调用handleClick。
handleClick仍然只能访问呈现中定义的作用域，因此，items仍然是空的。
调用add；更新父组件中的状态，但setHookItems将使用定义handleClick时在道具中定义的状态。
hookItems被设置为items，它是空的
这是用于第一次呈现，但我认为这个原则适用于所有
浏览 0提问于2019-11-07得票数 0
回答已采纳
2回答
React上下文未按预期工作:无法更改共享变量的值。
reactjs、react-hooks、next.js、use-context、react-three-fiber
我创建了一个上下文来共享在我的nextjs页面中“单击”变量的值，它似乎没有出现任何错误，但是正如您所看到的，即使在单击事件之后，变量的值仍然是假的。它不会变成真的。这是我第一次与上下文打交道，我做错了什么？我使用的是类型记录PS:在onClick事件之后，日志的数量增加了3或4，它是否不止一次被执行，但如何执行？
controlsContext.tsx
import { createContext, FC, useState } from "react";
export interface MyContext {
clicked: boolean;
chan
浏览 2提问于2022-02-24得票数 2
回答已采纳
1回答
在ReactJS功能组件中使用道具初始化状态时发出问题
javascript、reactjs
我正在使用，并根据支持值初始化状态值。但是主要的问题是，在重新呈现状态没有更新基于支柱的值之后，它会在重新呈现之后给出旧的值。
我有两个组件，一个是问题组件(父组件)，第二个是书签组件(子组件)。
在问题组件中，我获取数据并在状态中传递数据。
currentQuestion计时器组件每隔30秒更改一次状态的值。
计时器组件工作正常，这就是为什么我没有在这里包含代码
我正在将isBookmarked Bookmark组件问题ID和呈现为默认的false值
问题解释
书签开关工作正常。
但是当30秒结束时，书签应该被重置为它的道具值，这是没有发生的。问题结束后我会得到旧的状态值。我已经检查过，我
浏览 4提问于2022-03-02得票数 0
回答已采纳
1回答
如何在映射函数中使用useRef更新输入值的值？
reactjs、react-hooks、map-function、use-ref、react-custom-hooks
我已经决定使用refs连接到输入，实际上，我创建了一个自定义钩子来使用获取的数据，然后再进行推荐！
function useCreateRefFromProfileDataFromApi(profileDataFromApi) {
const [profileData, setProfileData] = useState([]);
const newArray = profileDataFromApi.map((data) => React.createRef())
useEffect(() => {
setProfileData(newA
浏览 3提问于2022-01-08得票数 0
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
实时音视频
即时通信 IM
对象存储活动推荐
腾讯云开发者
