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

我寫了一個示例代碼，所以你明白了。

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') 
 
)

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

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

<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>