Question

我添加了一个从应用程序中滑出的侧边栏。当侧边栏滑出时，我想将侧边栏的按钮从A图标更改为B图标。我无法弄明白的是我如何才能改变Fontawesome代码的状态？

我想将A图标（<i className=" fa fa- reply fa-2x" aria-hidden="true"></i>）更改为B图标（<i className="fa fa-share fa-2x" aria-hidden="true"></i>）

我的代码的一部分如下所示。

class Category extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      isOpen: false
    };
    this.handleClick = this.handleClick.bind(this);
  }

  handleClick() {
    this.setState({
      isOpen: !this.state.isOpen
    })
    console.log(!this.state.isOpen)
  }
  render() {
    const categoryStatus = this.state.isOpen ? "isopen" : "";
    const categoryContainer = this.state.isOpen ? "isopen" : "";
    return (
      <div>
        <div className="categoryContainer">
          <div className={categoryContainer}>
            <h3 >CATEGORIES</h3>
          </div>
          <button onClick={this.handleClick}>
            <i className="slideinButton fa fa-reply fa-2x" aria-hidden="true"></i>
          </button>
        </div>
        <div className={categoryStatus} id="category">
          <input className="categoryInput" type="text" value="Add Category" placeholder="Add Category" />
          <ul>
            <li>Greetings</li>
            <li>Main Switchboard</li>
            <li>Interjections</li>
          </ul>
        </div>
      </div>
    )
  }
}

Answer 1

由于您已经有一个控制滑块的状态变量，您可以使用它来确定应显示的图标。只需添加一个条件，根据该状态返回正确的条件：

<button onClick={this.handleClick}>
  <i className={"slideinButton fa fa-" + (this.state.isOpen ? "share" : "reply") + " fa-2x"} aria-hidden="true"></i>
</button>

或者，如果您发现这更具可读性：

<button onClick={this.handleClick}>
  {this.state.isOpen
    ? <i className="slideinButton fa fa-share fa-2x" aria-hidden="true"></i>
    : <i className="slideinButton fa fa-reply fa-2x" aria-hidden="true"></i>
  }
</button>

Answer 2

您可以像对categoryStatus和categoryContainer所做的那样做。

const icon = this.state.isOpen ? 'reply' : 'share'

<button onClick={this.handleClick}>
  <i className={`slideinButton fa fa-${icon} fa-2x`} aria-hidden="true" />
</button>

更好的方法是创建一个Icon组件，您可以在其中发送icon道具（reply，share ..），以便您可以重复使用代码中不同位置的相同Icon组件。更不用说用它编写更少的代码了。

状态更新时更改FontAwesomeIcon（React.JS）

2 个答案: