我是新手，我正在尝试使用状态来替换本机 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 不是一个函数。
您还可以使用箭头函数来扩大回调函数的访问范围：
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'})
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句