React绑定函数到数组内的每个项目

Question

我试图这样做，当你点击下拉箭头时，会出现设置下拉列表。

当我按下箭头下拉列表时，所有设置下拉列表都打开了阵列循环。

这是渲染循环的函数：

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

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

这是州：

  static dataStruc () {
    return {
      loading: true,
      settingPanel: false,
      pages: [],
    };
  }

Answer 1

您目前正在将boolean值保存到settingPanel，因此点击后会打开所有下拉菜单。

我的建议是将settingPanel从boolean替换为相应的网页id。如果您没有页面ID，请将当前页面index存储在其中。

这样可以更轻松地呈现下拉列表，以便您可以访问/控制所选内容，然后再渲染其设置：

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

然后在viewPublishedPages：

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

我写了一个示例代码，以便您明白这一点。

＆＃13;

＆＃13;

class App extends React.Component {
  constructor() {
    super()

    this.state = {
      pages: [
        { title: 'Home' },
        { title: 'Contact' },
        { title: 'Page' }
      ],
      settingPanel: -1,
    }

    this.showSettings = this.showSettings.bind(this)
  }

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

  render() {
    const { pages, settingPanel } = this.state
    
    return (
      <div>
        {pages.map((page, index) =>
          <div key={index} className="page">
            <div onClick={this.showSettings.bind(this, index)}>
              {page.title}
            </div>
            {settingPanel === index &&
              <div className="settings">
                <div>Setting 1</div>
                <div>Setting 2</div>
                <div>Setting 3</div>
              </div>
            }
          </div>
        )}
      </div>
    )
  }
}

ReactDOM.render(
  <App />,
  document.getElementById('root')
)

＆＃13;

.page {
  background-color: cyan;
  margin-top: 10px;
  padding: 10px;
}

.settings {
  background-color: black;
  color: white;
}

＆＃13;

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>

<div id="root"></div>

＆＃13;

＆＃13;

＆＃13;