react 点击两次_需要单击两次以更新react hooks中的状态。切换按钮

我需要点击两次按钮来更新状态。

我发现了一些与此相关的问题,但对我没有帮助。

请查找以下代码。

import React,{useState} from "react";

import { BrowserRouter as Router, NavLink } from "react-router-dom";

import './SectionConnect.css';

const SectionConnect = () => {

const [activeButton, setActiveButton] = useState("company");

function toggleButton() {

setActiveButton(activeButton==="company" ? "individual" : "company");

}

return (

How it works

{activeButton==="company"?

We help your employees maximise potential through a bespoke, science-backed wellbeing platform.

We connect you with the very best practitioners and most effective

methods to achieve optimal health.

to="/"

exact

activeClassName="active-btn"

className="disable-btn"

onClick={toggleButton}

>

For companies

to="/forIndividuals"

exact

activeClassName="active-btn"

className="disable-btn"

onClick={toggleButton}

>

For individuals

);

};

export default SectionConnect

我不明白我哪里做错了。

提前谢谢!

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
### 回答1: 可以使用 React 状态来实现点击一次按钮删除一个 div 的功能。具体实现步骤如下: 1. 在组件的状态添加一个数组,用于存储要删除的 div 的索引。 2. 在点击按钮的事件处理函数,将要删除的 div 的索引添加到状态数组。 3. 使用 Array.filter() 方法过滤掉要删除的 div,然后将过滤后的数组更新到组件的状态。 4. 在 render() 方法使用 map() 方法遍历状态数组,动态生成 div,并给每个 div 绑定一个删除按钮点击事件处理函数,用于删除该 div。 以下是示例代码: ```jsx import React, { useState } from 'react'; function App() { const [divs, setDivs] = useState([]); const handleDelete = (index) => { setDivs([...divs, index]); }; const handleRemove = (index) => { setDivs(divs.filter((i) => i !== index)); }; return ( <div> <button onClick={() => handleDelete(divs.length)}>添加 div</button> {Array.from({ length: divs.length }, (_, i) => i).map((i) => ( <div key={i}> <p>这是第 {i + 1} 个 div</p> <button onClick={() => handleRemove(i)}>删除</button> </div> ))} </div> ); } export default App; ``` 在上面的代码,我们使用 useState() 函数创建了一个名为 divs 的状态变量,它是一个数组,用于存储要删除的 div 的索引。 在 handleDelete() 函数,我们将要删除的 div 的索引添加到 divs 数组。 在 handleRemove() 函数,我们使用 Array.filter() 方法过滤掉要删除的 div,然后将过滤后的数组更新到 divs 状态变量。 在 render() 方法,我们使用 map() 方法遍历 divs 数组,动态生成 div,并给每个 div 绑定一个删除按钮点击事件处理函数,用于删除该 div。 ### 回答2: 要实现点击一次按钮删除div,可以使用React的事件处理函数和状态管理。 首先,在React组件的构造函数定义一个初始状态,例如: ```javascript constructor(props) { super(props); this.state = { isDivVisible: true }; } ``` 这里使用isDivVisible状态来表示div的可见性,true表示可见,false表示隐藏。 接下来,在render()函数根据isDivVisible状态来决定是否渲染div元素: ```javascript render() { return ( <div> {this.state.isDivVisible && <div>要删除的内容</div> } <button onClick={this.handleButtonClick}>点击删除div</button> </div> ); } ``` 接着,定义点击按钮的事件处理函数handleButtonClick(),在该函数更新isDivVisible状态的值为false: ```javascript handleButtonClick = () => { this.setState({ isDivVisible: false }); } ``` 当按钮点击时,handleButtonClick()函数会被调用,修改isDivVisible的值为false,从而使div在页面上被删除。 以上就是使用React实现点击一次按钮删除div的简单步骤。 ### 回答3: 使用 React 删除 div 的过程可以分为以下几个步骤: 1. 在组件定义一个 state 来控制是否显示 div,初始化为 true。 ```js const [isDivVisible, setIsDivVisible] = useState(true); ``` 2. 在 JSX 根据 state 的值来决定是否渲染该 div。 ```jsx {isDivVisible && <div>要删除的 div</div>} ``` 3. 定义一个函数 handleDeleteDiv,用于处理点击按钮事件,当按钮点击时,将 state 设置为 false。 ```js const handleDeleteDiv = () => { setIsDivVisible(false); }; ``` 4. 在点击按钮的地方,绑定 handleDeleteDiv 函数。 ```jsx <button onClick={handleDeleteDiv}>删除 div</button> ``` 完整的代码如下所示: ```jsx import React, { useState } from "react"; const MyComponent = () => { const [isDivVisible, setIsDivVisible] = useState(true); const handleDeleteDiv = () => { setIsDivVisible(false); }; return ( <div> {isDivVisible && <div>要删除的 div</div>} <button onClick={handleDeleteDiv}>删除 div</button> </div> ); }; ``` 这样,点击按钮后,div 将从页面移除。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值