最新消息:雨落星辰是一个专注网站SEO优化、网站SEO诊断、搜索引擎研究、网络营销推广、网站策划运营及站长类的自媒体原创博客

javascript - [ReactJSX]: Remove CSS classes on sibling components, when the current component is clicked - Stack Overflow

programmeradmin3浏览0评论

I'm building a navigation bar with React. The Navigation bar has various navigation items. When one of the navigation items is clicked, the class 'active' has to be added to the clicked item (this part is easily achievable with a new state tracking if it's active).

However when the 'active' class is added to one of the navigation items, the active class has to be removed from any other navigation items currently having it. This is straightforward with jQuery, but I'm guessing thats not the React best practice. What's the ideal way to remove the 'active' class from the sibling navigation items?

I'm building a navigation bar with React. The Navigation bar has various navigation items. When one of the navigation items is clicked, the class 'active' has to be added to the clicked item (this part is easily achievable with a new state tracking if it's active).

However when the 'active' class is added to one of the navigation items, the active class has to be removed from any other navigation items currently having it. This is straightforward with jQuery, but I'm guessing thats not the React best practice. What's the ideal way to remove the 'active' class from the sibling navigation items?

Share Improve this question asked Nov 6, 2015 at 15:25 Amal AntonyAmal Antony 6,83715 gold badges54 silver badges77 bronze badges 2
  • 1 I think that you should resolve this on container level (Navigation bar) rather than in navigation item. Navigation Bar should know about its children. Items(children of navigation bar) don't need to know about each other. – hex13 Commented Nov 6, 2015 at 15:33
  • Talk is cheap. I have shown the code below ;) – hex13 Commented Nov 6, 2015 at 16:25
Add a ment  | 

2 Answers 2

Reset to default 6

I think that the best approach would be handle this in the container ponent. Menu items don't need to know about each other, but container can. So container can give to children onClick callbacks. And later in callbacks container can set its state by setState. In render function you just pass active property to your MenuItem.

// ES6, React 0.14
var MenuItem = ({onClick, text, active}) => (
    <button onClick={onClick} style={active? {color: 'red'} : null}>{text}</button>
);

// example of use: <MenuBar buttons={['cat', 'dog', 'penguin']}/>
class MenuBar extends React.Component {
    constructor(props) {
        super(props);
        this.state = {activeIndex: 0};
    }
    handleItemClick(index) {
        this.setState({activeIndex: index});
    }
    render() {
        var activeIndex = this.state.activeIndex;
        return <div>
            {
                this.props.buttons.map(
                    (btn, i) => (
                        <MenuItem
                            active={activeIndex === i}
                            key={i}
                            onClick={this.handleItemClick.bind(this, i)}
                            text={btn} />
                    )
                )
            }
        </div>
    }
}

I've started learning React recently so I'm not an expert. But I just started building some tabs and you can see my example here.

What I did was make a conditional isActive state that changed on a click event. Then the class was changed like so:

className={this.props.isActive ? "active" : null}

与本文相关的文章

发布评论

评论列表(0)

  1. 暂无评论