Nivaech
@Nivaech
фотограф, видеограф, графический дизайнер

Как в React изменить стиль всех элементов класса?

Есть множество карточек товаров. По нажатию кнопки сетка должна уплотняться, чтобы отображалось большее количество элементов, а для этого хочу изменить размеры карточек по клику. Пробовал такой вариант:
function clickSmaller() {
        const element = document.getElementsByClassName('product-card');
            element.style.width = "250px";   
            element.style.height= "300px";

Но в этом случае React выдает ошибку, но делает то что нужно если задать номер позиции в array класса (например,
document.getElementsByClassName('product-card')[0], в таком случае изменяются параметры высоты и ширины только первого объекта). Пробовал также метод addClass, в котором просто бы добавлявся класс с нужными параметрами, но и с этим залет.
function clickSmaller() {
        const productCards = document.getElementsByClassName('product-card');
        productCards.classList.add('smallCard')
        }

Как сделать так, чтобы изменились параметры стиля всех элементов класса?
  • Вопрос задан
  • 89 просмотров
Решения вопроса 1
rockon404
@rockon404
Frontend Developer
Стараться не использовать прямые обращения к элементам DOM в React разработке и использовать состояние компонента.
const Grid extends React.Component {
  state = { itemsSize: 'sm' };

  handleChangeSize = () => { /* some code */ };  

  render() {
    const { itemSize } = this.state;
    const { items } = this.props;

    return (
      <Wrapper>
        <ControlPanel onChangeSize={this.handleChangeSize} />
        {items.map(item => <Item key={item.id} size={this.state.itemSize} />)}
      </Wrapper>
    );
  }
}
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через TM ID
Похожие вопросы