切换具有反应

Question

我有一个对象循环，每个对象都有自己的设置模式。当您单击设置按钮时，它会显示模态，但我无法再次单击该按钮来隐藏它。

我的状态如下：

this.state = {
  settingModal: -1
}

我有一个显示settingsModal的函数：

  showSettings(index) {
    this.setState({
      settingModal: this.state.settingModal === index ? -1 : index
    })
  }

然后在对象循环内，onclick为：

            <div className="arrow__container" onClick={this.showSettings.bind(this, i)}>
              <div className="arrow" />
            </div>

编辑：

这是显示代码：

  /**
   * Post display logic
   */
  viewPublishedPages() {

    const objects = this.state.objects;

    return (
      <div>
        <div className="ObjectsList">
          {objects.map((val, i) => {
            let dropdown = 'none';
            return (
              <div key={i} className="block">
              <div className="columns">
                <div className="column is-10">
                  <p>PUBLISHED</p>
                  <h2>{val.title}</h2>
                </div>
                <div className="column">
                  <div className="settings">
                    <div className="arrow__container" onClick={this.showSettings.bind(this, i)}>
                      <div className="arrow" />
                    </div>
                    {
                      this.state.settingModal === i ?
                         <ClickOutside onClickOutside={::this.hide}>
                          <div className="arrow__dropdown">
                            <Link href={{pathname: '/admin/edit-page', query: {title: val.title}}}>
                              <a className="arrow__dropdown__link">Edit</a>
                            </Link>
                            <button
                              className="arrow__dropdown__delete"
                              onClick={() => this.handleDelete(i)}>Delete</button>
                          </div>
                        </ClickOutside> 
                        : null
                    }

                  </div>
                </div>
              </div>
              </div>
            );
          })}
        </div>


      </div>
    );
  }

我以前只是检查模态是否有效且真实＆amp;假。我尝试在函数this.state.settingModal === index中添加if语句，然后将状态设置为settingModal: -1，否则运行常规命令。这似乎不起作用。它只显示模态，但是当我再次点击时没有任何反应。