javascript - 如何解决隐藏和显示错误在反应

Question

我正在做一个项目，我想使用事件处理程序<div>在另一个<div>元素下方显示隐藏，但是当我单击用于显示 div 的图标时，整个页面变为空白

这是我想要的图像：

这就是我所得到的 ，我试图通过互联网检查一些我可以获得解决方案的地方。好吧，我发现了与我所做的类似的事情，但错误仍然发生在我身上。

class PostItTeaser extends Component {
  state = {
    postIt: false,
    moreIt: false,
  }

  togglePostIt = e => {
    e ? e.preventDefault() : null
    this.setState({ postIt: !this.state.postIt })
  }

  _toggle = e => {
    e ? e.preventDefault() : null
    this.setState({
      moreIt: !this.state.moreIt,
    })
  }

  Child = () => <div className="modal">Hello, World!</div>

  render() {
    let { postIt } = this.state
    let { moreIt } = this.state
    let {
      type,
      group,
      disabled,
      session: { id, username },
    } = this.props

    return (
      <div>
        <div
          className="post_it inst"
          style={{ marginBottom: type == 'group' && 10 }}
        >
          <img src={`/users/${id}/avatar.jpg`} alt="Your avatar" />
          <div className="post_teaser">
            <span
              className="p_whats_new"
              onClick={disabled ? null : this.togglePostIt}
            >
              What's new with you, @{username}? #cool
            </span>
            <span className="m_m_exp" data-tip="More" onClick={this._toggle}>
              <MaterialIcon icon="expand_more" />
            </span>
          </div>
        </div>
        {moreIt && <Child />}

        {postIt && (
          <PostIt back={this.togglePostIt} type={type} group={group} />
        )}
      </div>
    )
  }
}

标签： javascriptjqueryreactjs

Answer 1

通过浏览代码，我相信您需要绑定范围，因为您正在调用的函数正在使用this.setState，它需要this是反应组件，而不是您正在收听的事件：

onClick={this._toggle.bind(this)}

您还可以在构造函数中绑定函数范围。或者，一种内存性能较差且丑陋的方式：

onClick={() => { this._toggle(); } }