Question

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

来自：Give a class of "selected" when clicked on another <a> then remove the class if it's the same <a>

我已经采用了这个例子，因为它很简单，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）中模仿相同的功能？

图片进一步澄清

Answer 1

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

基于“选定”类的数据可能来自父级或组件状态的任何位置。你会做这样的事情：

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

但是有一种更好的方法可以使用名为classnames的库来显示类名更改。完成同样的事情：

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

到目前为止，我们已经了解了如何在渲染功能上显示更改。您需要的第二件事是收听点击事件并触发最终将切换控制“选定”类名的数据的函数，在我的示例“myData”中。

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

当点击另一个元素（我们观察到的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>
    )
  }
}

Answer 2

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

一旦你有这种状态。您可以通过与组件状态进行比较，在render()函数中检查是否选择了链接。您还可以在单击链接时更新selectedIndex。

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

```

allLinks.map( (link, index) => 
  <a href={link.target} className={this.state.selectedIndex === index ? 'selected' : null}/>
)

```

如果单击另一个元素，则删除带有反应的类

2 个答案: