Question

我正在为菜单导航编写一个ReactJS应用程序，我在其中添加一个“选定”类，点击div并从其他元素中删除“selected”类。现在我陷入了如何从其他元素中删除类的问题这是我的代码

<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>

Answer 1

我的建议是创建两个组件

1）列表，该组件将具有所选/焦点项的内部状态编号/索引。作为道具，这个组件将获得一系列项目。在render方法中，您可以渲染父标记＆lt; ol＆gt;和＆lt; / ol＆gt;并且在该标记中，您可以在foreach循环项目列表中进行rander，基于状态中的索引和foreach循环中的索引，您可以计算项目是否被选中。此组件将具有处理程序以更改所选索引此处理程序，您必须将其传递给项目组件。

2）第二个组件项目将呈现＆lt; li>标签为专业人员这个组件将从数组中获取项目，并从父组件组件作为回调函数，如果选择了项目，则还标记（false / true）。

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

确保第二个组件Item已实现componentWillReceiveProps（nextProps）方法。选择道具改变时能够渲染

当我点击任何其他元素时如何在ReactJS中删除类？

1 个答案: