javascript - 添加类时从所有其他元素中删除类

Question

我有这个组件:

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>
        );
    }
}

此代码有效:event.target.className = "active"; ...但是从除此之外的所有其他元素中删除该类的正确方法是什么？

Answer 1

将列表元素组织到对象中并动态构建它们可能会更容易。然后将类添加为属性。所以在你的构造函数中:

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

然后在你的渲染中

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

然后激活组可以是:

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

这样，您就不必手动添加/删除元素中的内容，并且添加新项目会更容易(只需将条目添加到状态对象)。