Как динамически изменить стиль style-компонента?

Question

В настоящее время я изучаю использование стилевых компонентов в React и испытываю трудности с его реализацией.

У меня есть ряд кнопок (определенных как div). Когда кнопка нажата, я хочу, чтобы ее фон заполнился определенным цветом. Все остальные кнопки должны оставаться «невыбранными». Вот что у меня пока так:

import React from 'react';
import styles from 'styled-components';

const ButtonsRow = styles.div`
    display: flex;
    justify-content: space-evenly;
`;

const Button = styles.div`
    cursor: pointer;
    :hover {
        background-color: gray;
    }

    background-color: ${props => props.selected ? 'red' : 'none'};
`;

class ButtonsContainer extends React.Component {

    handleClick = (e) => {
      // add 'selected' prop to the clicked <Button>?
    }

    render() {
        return(
            <ButtonsRow>
                <Button onClick={this.handleClick}>People</Button>
                <Button onClick={this.handleClick}>Members</Button>
                <Button onClick={this.handleClick}>Games</Button>
            </ButtonsRow>  
        );
    }
}

export default ButtonsContainer;

Если нажата кнопка I, я думаю, что хочу дать ей «выбранный» реквизит. Таким образом, если у него есть опора, он заменит цвет фона. Если у него его нет, значит, у него нет цвета фона. Я думал, что, возможно, я мог бы использовать состояние, чтобы сделать это, но если бы я должен был сделать это, я думаю, что это применимо к каждой кнопке. Спасибо за любую помощь.

Answer 1

Вам необходимо управлять каждым Button состоянием.

Все решения будут отличаться в том, «как» вы управляете состоянием кнопок (как один объект / массив / и т. Д.). .), основная концепция состоит в том, чтобы получить id кнопки, чтобы узнать, к какому состоянию вы обращаетесь.

В следующем простом примере я использую функцию карри для предоставленияbutton id.

Еще одним простым решением может быть передача атрибута id вашей кнопке и запрос его по нажатию кнопки.

const ButtonsRow = styled.div`
  display: flex;
  justify-content: space-evenly;
`;

const Button = styled.div`
  cursor: pointer;
  :hover {
    background-color: gray;
  }

  background-color: ${props => (props.selected ? 'red' : 'none')};
`;

class ButtonsContainer extends React.Component {
  state = {
    first: false,
    second: false,
    third: true
  };

  toggle = buttonName => () => {
    this.setState(prev => ({ [buttonName]: !prev[buttonName] }));
  };

  render() {
    const { first, second, third } = this.state;
    return (
      <ButtonsRow>
        <Button selected={first} onClick={this.toggle('first')}>
          People
        </Button>
        <Button selected={second} onClick={this.toggle('second')}>
          Members
        </Button>
        <Button selected={third} onClick={this.toggle('third')}>
          Games
        </Button>
      </ButtonsRow>
    );
  }
}

Answer 2

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

class ButtonsContainer extends React.Component {
    state = {
       buttons = [{label:"People"},{label:"Members"},{label:"Games"}]
    }

    handleClick = (button) => (e) => {
      this.setState((prevState) => ({
           buttons: prevState.buttons.filter(btn => btn.label !== button.label)
                                .concat({...button,selected:!button.selected})
      })
    }

    render() {
        return(
            <ButtonsRow>
                {this.state.buttons.map(button => (<Button key={button.label} selected={button.selected} onClick={this.handleClick(button)}>{button.label}</Button>))}
            </ButtonsRow>  
        );
    }
}

export default ButtonsContainer;