Как динамически переключать 'className' в react.js ?

#javascript #css #reactjs

Вопрос:

Я хочу динамически устанавливать active класс в react.js но это не работает! Я использую setState() метод для изменения выбранного элемента.

эта строка кода не работает. className={selectedCategoryId === item.id ? 'active' : ''}

Я думаю, что 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});  
}

но это правильно изменяет className при выборе I всех тегов:

 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>

1. Привет, я хочу помочь, но я действительно не понял проблему. Пожалуйста, постарайтесь четко представлять, что вы ОЖИДАЕТЕ, и что происходит.

2. пожалуйста, поместите сюда соответствующий код frok и покажите нам ссылку (так вам будет легче помочь): stackblitz.com/edit/react-pzyyha

3. Почему вы использовали «className» дважды?

4. Можете ли вы предоставить общий доступ ко всему компоненту?

5. Я действительно не думал, что это создало проблему! Спасибо

Ответ №1:

Если setState () работает хорошо, попробуйте это :

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

Ответ №2:

Одним из наиболее распространенных способов является использование имен классов, с помощью которых вы можете условно объединять имена классов вместе

 var classNames = require('classnames');

class Button extends React.Component {
  // ...
  render () {
    var btnClass = classNames({
      btn: true,
      'btn-pressed': this.state.isPressed,
      'btn-over': !this.state.isPressed amp;amp; this.state.isHovered
    });
    return <button className={btnClass}>{this.props.label}</button>;
  }
}

Ответ №3:

Мы можем динамически переключать имя класса, как показано ниже,

 const [islight, setIslight] = useState(false)
const toggle = () => {
    setIslight(!islight)
}

return (
   <div className={`block ${islight ? "blocklight" : "blockdark"}`}>
      <h2>Hello World</h2>
   </div>
)

Ответ №4:

сохраните classname в состоянии вместе с выбранным элементом. Вы можете просто обновлять classname в состоянии всякий раз, когда требуется.

например,,

   <a key={item.id}
            onClick={() => this.handleFilter(item.id)}
            className={this.state.activeClassName}

где активное classname может быть обновлено внутри handlefilter