在添加类时，从所有其他元素中删除类

Question

I have this component:

class NavTree extends React.Component {
    // This is the left nav tree that opens each group for editing
    constructor(props) {
        super(props);

        this.state = {
            activeGroup: null // use this value to highlight the nav item in the tree
        };
        this.activateGroup = this.activateGroup.bind(this);
    }

    activateGroup(event) {
        this.setState({activeGroup: event.target.id});
        this.props.onNavChange(event.target.id);
        event.target.className = "active"; // this works
    }

    render() {
        return (
            <React.Fragment>
                <div id="nav" className="col-2">
                    <ul>
                        <li id="discovery" onClick={this.activateGroup}>Discovery</li>
                        <li id="financial" onClick={this.activateGroup}>Financials</li>
                        <li id="sales_stuff" onClick={this.activateGroup}>Sales Stuff</li>
                    </ul>
                </div>
            </React.Fragment>
        );
    }
}

This code works: event.target.className = "active"; ... but what is the proper way to remove the class from all other elements besides this one?

Answer 1

Might be easier to organise list elements into an object and build them dynamically. Then add class as a property. So in your constructor:

this.state = {
    items: [
        {id:"discovery", text:"Discovery"},
        {id:"financial", text:"Financials"},
        {id:"sales_stuff", text:"Sales"}
    ]
    ...
}

Then in your render

...
<ul>
    {
        this.state.items.map(item=>(
            <li id={item.id} onClick={()=>this.activateGroup(item.id)} key={item.id}
              className={this.state.activeGroup == item.id && "active"}>
                {item.text}
            </li>
        ))
    }
</ul>
...

And then activate group can just be:

activateGroup(id) {
    this.setState({activeGroup: id});
    this.props.onNavChange(id);
}

This way you aren't manually adding/removing stuff from elements, and adding new items is easier (just add entry to state object).