单击任何其他元素时如何删除 ReactJS 中的类？

debugcn 发表于 Dev

帕万·贾索里亚

我正在编写一个用于菜单导航的 ReactJS 应用程序，在该应用程序中，我在单击 div 时添加一个“选定”类，并从其他元素中删除“选定”类。现在我被困在如何从其他元素中删除类这是我的代码

<pre>
**App.js**

class App extends React.Component {
  constructor(){
    super();
    this.state = {
      active : "0",
    }
  }
  clickHandler(index){

  }
  render() {
    let menu = this.props.menu; // menu is a array of page name e.g. ['home','about us','contact us']
    let style = 0;
    return (
            {menu.map((menu, index) =>
             List clickHandler={this.clickHandler.bind(this, index)} index={index} key={index} menu={menu} 

            )}
    );
  }
}

export default App;


** list.js ** 

import React from 'react';

class List extends React.Component{
    constructor(props){
        super(props)
        this.state = {
            focused : "0"
        }
    }
    clickMe(index){
        let style = "";
        this.setState({focused: index});
        if(this.state.focused == index){
            console.log(index);
            style = "selected";
        }
        this.props.clickHandler();

    }
    render(){
        let style = "";
        if(this.state.focused === this.props.index){
            style = "selected";
        }else{
            style = "";
        }
        return li className={style} onClick={this.clickMe.bind(this, this.props.index)}>{this.props.menu} /li>
    }
}

export default List;

</pre>

伊万·穆贾坦

我的建议是创建两个组件

1）列表，该组件将具有选定/聚焦项目的内部状态编号/索引。作为道具，此组件将获得项目数组。在渲染方法中，您可以渲染父标签 <ol> 和 </ol>，在该标签中，您可以在项目的 foreach 循环列表中进行渲染，基于状态索引和 foreach 循环中的索引，您可以计算是否选择了项目。此组件将具有处理程序来更改所选索引此处理程序您必须传递给项目组件。

2) 第二个组件 Item 将渲染 < li > 标签作为优点该组件将从数组中获取项目并作为父 List 组件的回调函数，如果项目被选中 (false/true) 也会标记。

当用户单击 Item 时，List 组件中的处理程序将被称为更改父级中的状态，而不是整个列表将被重新呈现。

确保第二个组件 Item 已实现 componentWillReceiveProps(nextProps) 方法。选择道具更改时能够呈现

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。