Question

我是新手做出反应，我正在尝试使用state来替换本地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

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

invq

你也忘记了show和hide之后的收尾报价。我想你打算写：

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

Answer 2

您需要Object.prototype此回调：

null

否则，您没有bind存在的上下文。由于回调是由当前上下文之外的某些内容调用的，因此如果希望uploadTask.on('state_changed', function (snapshot) { ... }.bind(this));正确解析，则必须手动绑定。

从组件类中访问状态

2 个答案: