状态更新时更改 FontAwesomeIcon (React.JS)

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

由于您已经有一个控制滑块的状态变量，您可以使用它来确定应该显示什么图标。只需添加一个条件，即 returns 取决于该州的正确条件：

<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)

Change FontAwesomeIcon when state updated (React.JS)

sidebar

font-awesome

reactjs