反應，本地緩存變量和射擊onclick呈現

我想爲每個組件實例做一個局部變量，就像一個小緩存，因爲它存儲的信息切換的東西，並不需要在狀態/存儲。所以，我已經嘗試過像這樣：反應，本地緩存變量和射擊onclick呈現

設置一個默認的道具，以保持我的信息：

getDefaultProps: function getDefaultProps() { 
    return { 
     showPreviewModal: { value: false, 
          writable: true 
         } 
    }; 
},

設置一個函數來切換此道具：

togglePreviewModal: function togglePreviewModal() { 
    this.props.showPreviewModal = !this.props.showPreviewModal; 
},

，並具有該功能通過發射點擊功能

<button className="btn btn-default btn-blue previewAsset" onClick={() => this.togglePreviewModal() }>

我認爲這在理論上的工作，但的onclick是immedietly射擊在渲染上。我GOOGLE了這個問題，它似乎是最好的結果是將點擊功能更改爲：

{() => { this.props.togglePreviewModal() }}

然而，這並不工作，要麼，點擊功能仍然是射擊立即。

來源

2016-01-20 ajmajmajma

你不能修改React組件的'this.props'。如果您需要該組件來存儲組件之外未知的信息，則必須使用狀態。 –

你不能直接改變這樣的道具 - 因爲道具是從父組件明確傳遞下來的，所以你需要在源頭改變道具。據推測，它起源於某個組件的某個層次上的狀態。

要做到這一點，你需要傳遞一個函數以及在源代碼中改變它的道具（使用setState()）。這裏有一個例子：

var ParentComponent = React.createClass({ 
    togglePreviewModal: function() { 
     this.setState({ 
      showPreviewModal: !this.state.showPreviewModal 
     }; 
    },   

    getInitialState: function() { 
     return { 
      // Unnecessary but providing for clarity 
      showPreviewModal: false 
     }; 
    }, 

    render: function() { 
     // This is for whatever values you were mapping over 
     var childComponents = ...map(function() { 
      return <ChildComponent togglePreviewModal={this.togglePreviewModal} />; 
     }); 

     if (this.state.showPreviewModal) { 
      return (<div> 
       <Modal /> 
       {childComponents} 
      </div>); 
     } else { 
      return (<div> 
       {childComponents} 
      </div>); 
     } 
    } 
}); 

var ChildComponent = React.createClass({ 
    render: function() { 
     return <button 
      className="btn btn-default btn-blue previewAsset" 
      onClick={this.props.togglePreviewModal} />; 
    } 
});

請注意，我不是調用在<button>的onclick功能，只需在道具傳遞（這是一個功能）。

來源

2016-01-20 18:55:50 Donald

因此，這隻適用於映射的第一個組件。 – ajmajmajma

你能編輯你的帖子來添加你正在使用的樣本嗎？你在繪製什麼？ – Donald

所以不同的是這個項目是切換顯示/隱藏模式是多次使用。有一些結果會出現，並且對於這些結果中的每一個結果都會呈現一次。第一條評論的意思是，它的工作原理，但僅限於第一個結果項目。之後的那些不打開模式。 – ajmajmajma

反應，本地緩存變量和射擊onclick呈現

回答

相關問題