Css 如果单击另一个元素，则使用react移除类

目前正在从jquery/php webapp升级到react。一切进展顺利，我理解react等背后的概念。我唯一找不到解决方法的问题是如何根据用户单击的位置动态添加/删除类。我需要这个，因为我有一些下拉列表，当用户点击它时会触发，如果他们点击其他地方，需要隐藏

发件人：

我举了这个例子，因为它是问题的简单Jquery解决方案：

var h2 = $("h2 a");

h2.on("click", function() {
  if ($(this).is(".selected")) {
    $(this).removeClass("selected");
  } else {
    h2.removeClass("selected")
      .filter(this).addClass("selected")
  }
});

如何在react（和/或redux）中模拟相同的功能？

图像进一步澄清

---

问题是，您希望在单击事件上切换一些数据，并相应地更改html元素的类名

“选定”类所基于的数据可以来自任何地方，从父级或组件状态。您可以这样做：

<div className={ myData ? 'selected' : '' } ></div>

但是有一种更好的方法可以通过类名库显示类名更改。完成同样的事情如下：

<div className={ classNames({ 'selected' : myData }) } ></div>

到目前为止，我们已经了解了如何显示渲染函数的更改。您需要做的第二件事是侦听click事件并启动函数，该函数最终将切换控制“selected”类名的数据，在我的示例“myData”中

下面是一个工作示例，可能有多种方法来实现这一点。但我强烈建议使用库来切换类名

当另一个元素（除了我们观察到的li元素）被单击时删除类的解决方法可以通过单击事件侦听器来解决

For instance : 

import React, { Component }     from 'react'
import classNames               from 'classnames'

class DropDown extends Component {
  constructor(props){
    super(props)
    this.state = {
      activeSelected : ''
    }
    this.handleClick = this.handleClick.bind(this)
  }
  componentDidMount(){
    global.document.addEventListener( 'click', this.handleClick, false )
  }
  componentWillUnmount(){
    global.document.removeEventListener( 'click', this.handleClick, false )
  }
  handleClick(event){
    if( event.target.className.includes('not-changing-css-class') && 
        this.state.activeSelected !== '' 
    ) this.setState( { activeSelected : '' } )
  }
  render(){
    let { activeSelected } = this.state
    return (
      <ul>
        <li 
          className={ classNames({
            'not-changing-css-class' : true,
            'selected' : activeSelected === 'item1'
          }) } 
          onClick={ event => this.setState({ activeSelected : activeSelected === 'item1' ? '' : 'item1' }) }
        >
          Item 1
        </li>
        <li 
          className={ classNames({
            'not-changing-css-class' : true,
            'selected' : activeSelected === 'item2'
          }) } 
          onClick={ event => this.setState({ activeSelected : activeSelected === 'item2' ? '' : 'item2' }) }
        >
          Item 2
        </li>
        <li 
          className={ classNames({
            'not-changing-css-class' : true,
            'selected' : activeSelected === 'item3'
          }) } 
          onClick={ event => this.setState({ activeSelected : activeSelected === 'item3' ? '' : 'item3' }) }
        >
          Item 3
        </li>
      </ul>
    )
  }
}

例如：
从“React”导入React，{Component}
从“classNames”导入类名
类下拉列表扩展组件{
建造师（道具）{
超级（道具）
此.state={
所选活动项：“”
}
this.handleClick=this.handleClick.bind（this）
}
componentDidMount（）{
global.document.addEventListener（'click'，this.handleClick，false）
}
组件将卸载（）{
global.document.removeEventListener（'click'，this.handleClick，false）
}
handleClick（事件）{
if（event.target.className.includes（'not-changing-css-class'）&&
this.state.activeSelected！=''
)this.setState（{activeSelected:''}）
}
render（）{
让{activeSelected}=this.state
返回(

this.setState（{activeSelected:activeSelected==='item1'？'''item1'}）}
>
项目1

this.setState（{activeSelected:activeSelected==='item2'？'''item2'}）}
>
项目2

this.setState（{activeSelected:activeSelected==='item3'？'''item3'}）}
>
项目3


)
}
}

您可以在组件状态下保存选定的元素索引（或ID，如果使用ID）。如果您认为此状态与应用程序中的任何其他组件相关，则可以使用redux应用商店，但从状态开始更简单

一旦你有了这种状态。通过与组件状态进行比较，可以在

render（）

函数中检查链接是否被选中。单击链接时，您还将更新selectedIndex

呈现链接的简单示例如下所示。注意，您可以将这些函数的一部分提取为函数，而不是在JSX中使用表达式

```

allLinks.map（（链接，索引）=>
)

---

```

wll如果用户单击其他位置（即不在这3项中的一项上），这也会删除所选的

类？你是什么意思？只有当有人单击我代码中的li元素时，才会发生这些切换。我理解，但是如果他们单击页面上的另一个元素呢？下拉列表仍将选择类
。他们需要手动关闭它，这是我想要避免的。如果我有不止一个地方可以实现这一点，这会起作用吗？让我们一起来。我不确定使用map（）创建所有链接是否明智，因为有些链接显然可以通过ajax调用创建。不确定你的应用程序，但如果你不想使用map，您可以继续使用
数据-
属性或ID，而不是在回答中提到的状态下保存索引。
allLinks.map( (link, index) => 
  <a href={link.target} className={this.state.selectedIndex === index ? 'selected' : null}/>
)