时间戳

首页 > 解决方案 > 尝试使用 JSX React 中的按钮更改 css 类

javascript - 尝试使用 JSX React 中的按钮更改 css 类

问题描述

我正在尝试编写一个反应类，其中渲染函数包含一个按钮，一旦单击该按钮，它将 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>
    );
  }
}

标签： javascriptcssreactjs

解决方案

您在这里遇到的问题是您的类名，a.是 CSS 类名的保留字符，因此名称single.taken无效，您需要将其切换为类似single-taken

有关有效 CSS 类名称的更多信息，请查看此线程。

推荐阅读