呈現新元素onClick

Question

我有一個名爲<ImageVoteItem/>的ReactJS組件。我有一個名爲'Add Option'的按鈕。當我點擊這個按鈕<ImageVoteItem/>應該出現。當我再次點擊該按鈕時，應該出現另一個<ImageVoteItem/>組件。

我已經完成了這種使用狀態。但我只能渲染一個<ImageVoteItem/>組件。當我點擊'Add Option'按鈕時，如何反覆渲染相同的組件？

我班

class ImageVotePost extends Component { 

    constructor() { 
     super(); 

     this.state = { 
      addOption: false, 
     } 
     this.addOption = this.addOption.bind(this); 
    } 

    addOption() { 
     this.setState({ 
      addOption: true, 
     }) 
    } 

    render() { 

     return (

      <div className="padding5px margin_bottom10px"> 
       <ImageVoteItem/> 
       <ImageVoteItem/> 
       {this.state.addOption ? <ImageVoteItem/> : null} 

       <div className="image_add_btn border" onClick={this.addOption}> 
        <div className="width_100 relative_position"> 
         <img src={plus} className="plus_icon"/> 
         <a className="add_opt_text">Add Option</a> 
        </div> 
        <input type="file" id="src" className="filetype2"/> 
       </div> 
      </div> 


     ) 
    } 
} 

Answer 1

我添加另一種選擇你作爲maxImage。如果你定義了任何最大圖像值，你可以添加更多的圖像組件。 在返回渲染之前，您可以使用循環來將圖像列表定義爲數組，並且您可以在渲染的元素中使用它。

class ImageVotePost extends Component { 

constructor() { 
    super(); 

    this.state = { 
     addOption: 0, 
     maxImage:10 
    } 
    this.addOption = this.addOption.bind(this); 
} 

addOption() { 
    this.setState((prevState)=>({ 
     addOption: ++prevState.addOption, 
    }) 
} 


render() { 
    let list = [] 
    for(var i =0 ;i<=this.state.maxImage;i++){ 
     list.push(<div>{this.state.addOption>i&& 
     <ImageVoteItem/>}</div>) 
    } 
    return (
     <div className="padding5px margin_bottom10px"> 
      {list} 
      <div className="image_add_btn border" onClick={this.addOption}> 
       <div className="width_100 relative_position"> 
        <img src={plus} className="plus_icon"/> 
        <a className="add_opt_text">Add Option</a> 
       </div> 
       <input type="file" id="src" className="filetype2"/> 
      </div> 
     </div> 


    ) 
} 

}

如果你不希望任何限制，你也可以使用這樣的：

class ImageVotePost extends Component { 

    constructor() { 
     super(); 

     this.state = { 
      imageList: [] 
     } 
     this.addOption = this.addOption.bind(this); 
    } 

    addOption() { 
    let list = this.state.imageList; 
    list.push(<ImageVoteItem />); 
    this.setState({ 
     imageList: list 
    }) 
} 


    render() { 
     return (
      <div className="padding5px margin_bottom10px"> 
       {list} 
       <div className="image_add_btn border" onClick={this.addOption}> 
        <div className="width_100 relative_position"> 
         <img src={plus} className="plus_icon"/> 
         <a className="add_opt_text">Add Option</a> 
        </div> 
        <input type="file" id="src" className="filetype2"/> 
       </div> 
      </div> 
     ) 
    } 
} 

Answer 2

而不是使用bool的使用將存儲的ImageVoteItem計數（你要多少時間來渲染組件）的數值。然後在該狀態值上使用map來呈現ImageVoteItem組件。

像這樣：

class ImageVotePost extends Component { 

    constructor() { 
     super();  
     this.state = { 
      count: 1, 
     } 
     this.addOption = this.addOption.bind(this); 
    } 

    addOption() { 
     this.setState((prevState) => { 
      return {count: prevState.count + 1} 
     }) 
    } 

    _renderComponent(){ 
     let count = this.state.count, uiItems = []; 
     while(count--) 
      uiItems.push(<ImageVoteItem key={el}/>) 
     return UiItems; 
    } 

    render() { 
     return (
      <div className="padding5px margin_bottom10px"> 

       {this._renderComponent()} 

       <div className="image_add_btn border" onClick={this.addOption}> 
        <div className="width_100 relative_position"> 
         <img src={plus} className="plus_icon"/> 
         <a className="add_opt_text">Add Option</a> 
        </div> 
        <input type="file" id="src" className="filetype2"/> 
       </div> 

      </div> 
     ) 
    } 
} 

Answer 3

試試這個...

class ImageVotePost extends Component { 
     constructor() { 
      super();  
      this.state = { 
       images: [] 
      } 
     } 

     _renderComponent(){ 
      let images = this.state.images; 
      images.push(<ImageVoteItem key={images.length+1}/>); 
      this.setState({ 
      images: images 
     }); 
     } 

     render() { 
      return (
       <div className="padding5px margin_bottom10px"> 

        {this.state.images} 

        <div className="image_add_btn border" onClick={this._renderComponent()}> 
         <div className="width_100 relative_position"> 
          <img src={plus} className="plus_icon"/> 
          <a className="add_opt_text">Add Option</a> 
         </div> 
         <input type="file" id="src" className="filetype2"/> 
        </div> 

       </div> 
      ) 
     } 
    }