时间戳

首页 > 解决方案 > react - 如何强制元素立即重绘

javascript - react - 如何强制元素立即重绘

问题描述

我在反应组件中有一个切换按钮：

toggleSpeak = () => {
   this.setState({buttonOn: !this.state.buttonOn});
}

按钮会根据其状态更改其样式：

 <img key="headphones" className={audioclass} src={this.state.buttonOn ? white : black} onClick={this.toggleSpeak}/>

这也会触发子组件中的一些内容：

play={this.state.buttonOn}

这会触发一些语音合成播放，这有时需要一段时间。问题是我希望用户立即意识到某些事情正在发生。但是，该按钮不会立即更改其样式。只要我触发了别的东西，无论是通过上面的传递给孩子的属性，还是通过触发 redux 动作，它仍然会延迟改变颜色几秒钟。

我想立即更改颜色，让用户知道不要一直重复它。我怎样才能做到这一点？

标签： javascriptreactjs

解决方案

你在渲染中做语音合成吗？您应该在切换按钮后调用执行语音合成的函数。就用户体验而言，我建议您在执行可能需要一些时间才能完成的任务时显示加载指示器。此外，您可以禁用该按钮，直到 SpeechSynthesis 完成。

toggleSpeak = () => {
  if(!this.state.doingSpeechSynthesis) {
    this.setState(
      {buttonOn: !this.state.buttonOn, doingSpeechSynthesis: true}, 
      () => speechSynthesis(args, this.setState{doingSpeechSynthesis: false}));
   }
}

推荐阅读