从组件内访问状态 class

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 is not a function。

Answer 1

您需要bind这个回调：

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

否则，您没有 this.setState 存在的上下文。由于回调是由当前上下文之外的事物调用的，因此如果您希望 this 正确解析，则必须手动绑定。

Answer 2

您还可以使用箭头函数来扩大回调函数的访问范围：

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

从组件内访问状态 class

access state from within component class

javascript

reactjs

react-jsx