Попытка изменить класс css с помощью кнопки в JSX React

Question

Я пытаюсь написать класс реакции, в котором функция рендеринга содержит кнопку, при нажатии на которую она меняет класс css с одного на другой, а также меняет текст с доступного на сделанный. Изменение текста работает, но не изменение CSS. Я не уверен, где я ошибаюсь в приведенном ниже коде. Я также попытался написать функцию класса переключения в своих методах класса, которая также не переключается. Не слишком сильна в html и JSX, поэтому любая помощь приветствуется. Спасибо.

class Singles extends React.Component {
  constructor() {
    super();
    this.state = {
      isSingle: false,
    };
  }
  toggleIsSingle() {
    this.setState({
      isSingle: !this.state.isSingle
    });
  }
  render() {
    const { name, description, id } = this.props.pet;
    const isSingle = this.state.isSingle;
    return (
      <div
        key={id}
        className={this.state.isSingle ? 'single.taken' : 'single'}
      >
        <div id="info">
          <p>{name}</p>
          <p>{description}</p>
          <div>{this.state.isSingle ? 'Taken!' : 'Available'}</div>
          <button onClick={() => this.toggleIsSingle()}>Toggle Status</button>
        </div>
      </div>
    );
  }
}

Answer 1

Проблема, которая у вас возникла, связана с именем вашего класса, . - это зарезервированный символ для CSS имен классов, поэтому single.taken - недопустимое имя, и вам нужно будет переключить его на что-то вроде single-taken

Дополнительную информацию о допустимых именах классов CSS см. В этой ветке.

Answer 2

Очень важно:

правила именования классов:

• Должен начинаться с буквы AZ или az
• Может сопровождаться: буквами (A-Za-z), цифрами (0-9), дефисами («-») и подчеркиванием («_»)

Как уже отмечалось @ Rodentman87 проблема, безусловно, заключается в вашем правиле именования классов.

className={this.state.isSingle ? 'single.taken' : 'single'} здесь с точкой ., попробуйте использовать допустимый символ (например, - or _) для имен классов.

ИЛИ в качестве альтернативы вы можете попробовать следующее:

className={this.state.isSingle ? 'single taken' : 'single'} здесь у вас есть single и taken как часть вашего className, что позволит вам выбрать взято одиночно, используя

CSS:

.single.taken{
  /* Your taken Single Style here */
}