时间戳

首页 > 解决方案 > 如何在 ReactJS 的功能组件中编写 this.handle click

reactjs - 如何在 ReactJS 的功能组件中编写 this.handle click

问题描述

我想隐藏并显示下拉 div 点击使用一个饱和度。在这个方法中，所有的 div 都可以一键打开。

如果我点击 button1 div 1 应该打开 如果我点击 button2 div 2 应该打开

this.click如何写在功能组件中，请帮助我

const [dropdownOpen, setdropdownOpen] = useState(false);
const handleDropdown = () =>{
    setdropdownOpen(!dropdownOpen)
}
div{
display:none
}

.dropdown-menu.show{
display:block
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

<button type="button" onClick={handleDropdown}>Button 1</button>
<button type="button" onClick={handleDropdown}>Button 2</button>
<button type="button" onClick={handleDropdown}>Button 3</button>

 <div className={`dropdown-menu ${dropdownOpen === true ? "show" : "hide"}`} aria-labelledby="dropdownMenuLink">
 Div 1
 </div>
 
  <div className={`dropdown-menu ${dropdownOpen === true ? "show" : "hide"}`} aria-labelledby="dropdownMenuLink">
 Div 2
 </div>
 
  <div className={`dropdown-menu ${dropdownOpen === true ? "show" : "hide"}`} aria-labelledby="dropdownMenuLink">
 Div 3
 </div>

标签： reactjs

解决方案

我认为您应该在这里使用数组状态。这对我来说似乎是最简单的方法。所有divs并相应buttons地应该有它们单独的状态变量。切换它们应该可以解决问题。

要唯一标识，您可以使用 adata-attribute将按钮链接到其 div。我用过data-reactid。

为了保持通用性，下面的代码只是映射到数组上以生成不同的divs. argument地图回调函数的第二个是索引，因此利用了它。

const [dropdownOpen, setdropdownOpen] = useState([false,false,false]);
const handleDropdown = (e) =>{
    let newArray=  [...dropdownOpen];
    newArray[e.target.dataset.reactid] = !newArray[e.target.dataset.reactid];
    setdropdownOpen(newArray)
}
div{
display:none
}

.dropdown-menu.show{
display:block
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

<button type="button" onClick={handleDropdown} data-reactid={1}>Button 1</button>
<button type="button" onClick={handleDropdown} data-reactid={2}>Button 2</button>
<button type="button" onClick={handleDropdown} data-reactid={3}>Button 3</button>

{dropdownOpen.map( (x,index) => {
return <div className={`dropdown-menu ${x === true ? "show" : "hide"}`} aria-labelledby="dropdownMenuLink">
 `Div ${index+1}`
 </div>
})

注意：该片段不起作用。我刚刚复制了你的。

推荐阅读