Question

在分层菜单中，我有类似以下内容：

<a onclick={this.handleClick()}>Nav Link</a>
<div open={false}>
    Hidden Submenu
</div>

在我的handleClick函数中，我希望能够将子菜单 adjacent 的属性切换到所单击的链接，并在每次单击时将其从false切换为true，反之亦然。点击。

总而言之，我想要这个jQuery东西的React版本：$("a").next().prop("open", "true")

Answer 1

维护您的enter code here变量的状态，

open

// handle单击以切换

state = {open:false}

在handleClick = () => { this.setState({open: !this.state.open}) }中，像这样的onClick neven调用函数<== this.handleClick()

() not needed

Answer 2

根据示例，应将触发子菜单属性的属性保持在示例状态：

state = {
isSubmenuShowing: false
}

div将如下所示：

<div open={this.state.isSubmenuShowing}>
...
</div>

然后在handleClick上进行更改

handleClick(){
this.setState({isSubmenuShowing: !this.state.isSubmenuShowing});
}

Answer 3

您需要有一个状态，您不能在react中直接更改道具。您可以使用class组件来做到这一点，但我更喜欢将功能组件与如下所示的钩子一起使用：

import React from "react"
    const collapse = ()=>{
        const [open,setopen]=React.useState(false)

        return(
        <a onClick={()=>setopen(!open)}>Nav Link</a>
        <div open={false}>
            Hidden Submenu
        </div>
        )

     }

Answer 4

尝试这个简单的JavaScript代码

  var counter=0;
  function handleClick(){
   counter=++counter; // Adds 1 onClick

if(counter===1){

prop1(); //Executes prop 1 when counter is 1

}else if(counter===2){

prop2(); // Prop 2 when counter is 2
counter=0; // Counter returned to 0 so that this toggle can be used again

}

   }

在React中对相邻元素进行操作

4 个答案: