Javascript 对数组中的每个项使用React bind函数

我正试图使它这样，当你点击下拉箭头的设置下拉列表将出现

当我当前按下箭头下拉列表时，数组循环中的所有设置下拉列表都将打开

这是渲染循环的函数：

viewPublishedPages() {

    const pages = this.state.pages;

    return (
      <div>
        {pages.map((val, i) => {
          let dropdown = 'none';
          return (
            <div className="block" key={i}>
              <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">
                      <div className="arrow" onClick={this.showSettings.bind(this, i)} />
                    </div>
                    {
                      this.state.settingPanel 
                        ?
                        <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>
    );
  }

---

您当前正在将一个

布尔值

保存到

设置面板

，因此单击后所有下拉列表都会打开

我的建议是将

settingPanel

从

boolean

替换到相应的

id

页面。如果您没有页面ID，则将当前页面

索引存储在其上

这样可以更容易地渲染下拉列表，以便您可以访问/控制选定的下拉列表，并在以后渲染其设置：

showSettings(index) {
  this.setState({
    settingPanel: index,
  })
}

然后在
视图发布页面中
：

{this.state.settingPanel === i && 
  <ClickOutside onClickOutside={::this.hide}>
    ..
  </ClickOutside>}


那么问题出在哪里？@mersocarlin它应该只显示相应“页面”的下拉列表。当前，当我按下下拉菜单时，它会打开两个设置面板。你能提供一个关于
这个.state.pages
看起来如何的示例吗？尽管有点混乱。你正在循环浏览一系列的页面（
pages.map（…）
），每一个页面你都必须呈现这个下拉列表？@mersocarlin我添加了这个州看起来像什么，这让人非常惊讶。Def是有意义的。我以为绑定会在幕后做这件事。
{this.state.settingPanel === i && 
  <ClickOutside onClickOutside={::this.hide}>
    ..
  </ClickOutside>}