Question

我正在尝试使用React切换箭头。在网上找到了一些例子，但仍然无法使其发挥作用。

这是我到目前为止所做的：

class Footer extends React.Component {

  constructor(props) {
    super(props);
    this.state = {
      active: false,
    };
  }

  handleClick() {
    const currentState = this.state.active;
    this.setState({
      active: !currentState
    })
  }
  

render() {
    return (
        <footer className="footer">
          <section className="container">
            <a className="visible-xs" role="button">
                       Social
              <i onClick={this.handleClick} className={this.state.active ? "fa fa-chevron-up" : "fa fa-chevron-down"} aria-hidden="true"></i>
             </a>
          </section>
         </footer>
    )
  }
}
         
module.exports = Footer;

任何帮助都将不胜感激。

Answer 1

问题是没有使用预期范围调用handleClick函数。

来自React doc：

您必须小心JSX回调中 this 的含义。在 JavaScript，类方法默认不受约束。如果你忘记了绑定 this.handleClick 并将其传递给 onClick ，此将未定义 当实际调用该函数时。

在构造函数的末尾添加以下代码行：

// This binding is necessary to make `this` work in the callback
this.handleClick = this.handleClick.bind(this);

Answer 2

如果您使用的是ES7，您可以使用有用的语法自动将您的方法绑定到您的班级，并使其更清晰：

class Footer extends React.Component {  
  state = { active: false }

  handleClick = () => {
    const { currentState } = this.state;
    this.setState({ active: !currentState });
  }

  render() {
    const { active } = this.state;
    return (
      <footer className="footer">
        <section className="container">
          <a className="visible-xs" role="button">
            Social
            <i onClick={this.handleClick} className={active ? "fa fa-chevron-up" : "fa fa-chevron-down"} aria-hidden="true"></i>
          </a>
        </section>
      </footer>
    )
  }
}

module.exports = Footer;

使用react切换箭头

2 个答案: