從組件類訪問狀態

Question

我是新來的反應， 我想用狀態來替換原生的JS DOM調用更新方法內的DOM。
我似乎無法得到它的工作。它一直說this.setState不是一個函數。
這就是下面我當前的代碼：

class AddMsg extends React.Component { 
    constructor(props) { 
    super(props); 
    this.state = {uploadBar: 'hide'}; 
    } 
    ... 
    handleSubmit(e) { 
    ... 
    if (file !== '' && this.state.chars_left >= 0) { 
     ... 
     uploadTask.on('state_changed', function (snapshot) { 
     ... 
     let progress = (snapshot.bytesTransferred/snapshot.totalBytes) * 100; 
     (progress < 100) 
      ? this.setState({uploadBar: 'show'}) 
      : this.setState({uploadBar: 'hide'}) 
     }, function error(err) { 
     ... 
     }, function complete() { 
     ... 
     } 
     ... 
    } 
    render(){ 
    return(
     ... 
     <span className={`help is-primary has-text-centered ${this.state.uploadBar}`}> Sending scribe now...</span> 
    ) 
    } 
} 

我試圖替換代碼...

(progress < 100) 
     ? document.getElementById('uploadBar').style.display = 'block' 
     : document.getElementById('uploadBar').style.display = 'none'; 

任何人有什麼建議嗎？
就像我說的，我不斷收到setState不是函數。

Answer 1

您還可以使用箭頭功能來擴大你的回調函數的訪問範圍：

uploadTask.on('state_changed', (snapshot) => { 
    ... 
    let progress = (snapshot.bytesTransferred/snapshot.totalBytes) * 100; 
    (progress < 100) 
     ? this.setState({uploadBar: 'show}) 
     : this.setState({uploadBar: 'hide}) 
}) 

你也忘了顯示和隱藏後的收盤報價。我覺得你的意思寫：

this.setState({uploadBar: 'show'}) 
this.setState({uploadBar: 'hide'}) 

Answer 2

您需要bind這個回調：

uploadTask.on('state_changed', function (snapshot) { 
    ... 
}.bind(this)); 

否則，你沒有背景，其中this.setState存在。由於回調被當前上下文之外的內容調用，因此如果您想要this正確解析，則必須手動綁定。