當單擊嵌入按鈕時，只在L1下面的div中渲染組件

Question

當通過在本地狀態下爲每個索引保留一組顯示的組件時，這將在單擊img時在每個列表項下面呈現組件。例如。 （state.showItems == [true，false，false，true]）。

我想將此數組中的值限制爲一次只有一個'true'，這樣<SuggestStep />組件在被點擊的按鈕下的div中只呈現一次。我沒有使用CSS，因爲列表可能會變得非常大，並且不想渲染和隱藏每個組件。還考慮使用顯示爲圖像的單選按鈕，但不知道這是否會涉及與LI的混合形式，如果這是不好的。關於限制showItems數組項目的問題的反饋一次只有一個爲真，並且接近我描述的組件呈現問題的一般模式是受歡迎的。

class CurrentSteps extends Component { 
     constructor(props) { 
     super(props) 
     this.state = { 
      toggleOnSuggestInput: false, 
      showItems: [] 
    } 
     this.clickHandler = this.clickHandler.bind(this) 
    } 

    clickHandler(index){ 
     let showItems = this.state.showItems.slice(); 
     showItems[index] = !showItems[index] 
     this.setState({showItems}) 
     this.setState(prevState => ({ 
     toggleOnSuggestInput: !prevState.toggleOnSuggestInput 
     })) 
    } 

     render() { 

     let steps = this.props.currentGoalSteps.map((step, index) => { 
      return (
      <div key={`divKey${index}`}> 
       <li key={index}>{step}</li> 
       <img key={`imageKey${index}`} onClick={this.clickHandler.bind(this,index)} alt="" src={plus}/> 
       {this.state.showItems[index] ? <SuggestStep /> : null} 
      </div> 
       ) 
      }); 

    return (
      <div> 
      <ul> {steps} </ul> 
      </div> 
    ) 
    } 

Answer 1

試着做以下修改代碼...

更改this.state像這樣。

this.state = { 
    toggleOnSuggestInput: false, 
    activeIndex: null 
}; 

將您的clickHandler更改爲此。

clickHandler(event, index) { 
    this.setState({ activeIndex: index }) 
} 

將您的map更改爲如下所示。注意onClick改變。

let steps = this.props.currentGoalSteps.map((step, index) => { 
    return (
     <div key={`divKey${index}`}> 
      <li key={index}> 
       {step} 
      </li> 
      <img 
       key={`imageKey${index}`} 
       onClick={e => this.clickHandler(e, index)} 
       alt="" 
       src={plus} 
      /> 
      {this.state.activeIndex === index ? <SuggestStep /> : null} 
     </div> 
    ); 
});