javascript - 如何在 react.js 中动态切换 'className'？

Question

我想在 react.js 中动态设置 active 类，但它不起作用! 我正在使用 setState() 方法来更改所选元素。

这行代码不起作用。 className={selectedCategoryId === item.id ? '事件':''}

我认为 setState() 函数不能正常工作...

const {open, selectedProduct, productCategory, filteredProducts, selectedCategoryId} = this.state;
const categoryItems = productCategory.map((item) =>
    <a key={item.id}
       onClick={() => this.handleFilter(item.id)}
       className={selectedCategoryId === item.id ? 'active' : ''}
       // className={()=>this.isActive(item.id)}
       className="pointer"
    >{item.value}</a>
);

这不会改变类:

handleFilter = (id) => {
    const filteredItem = this.state.productList.filter(x => x.categoryId == id);
    this.setState({filteredProducts: filteredItem, selectedCategoryId: id});  
}

但这会在选择所有标签时正确更改类名:

handleRemoveFilter = () => {
    this.setState({filteredProducts: this.state.productList, selectedCategoryId: 0});
}
//-------------------------------
<div className="tag-list">
    <a  onClick={this.handleRemoveFilter}
        className="pointer"
        className={ this.state.selectedCategoryId === 0 ? 'active' : ''}
    >All tags</a>
    {categoryItems}
</div>

Answer 1

如果 setState() 运行良好，试试这个:

<a onClick={this.handleRemoveFilter}
        className={ this.state.selectedCategoryId === 0 ? 'pointer active' : 'pointer'}
>All tags</a>