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

Question

我在 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 操作，它仍然会延迟更改颜色几秒钟。

我想立即改变颜色，不要拖延，这样用户就知道不要继续推它。我怎样才能做到这一点？

Answer 1

this.setState({}) 函数确实是异步的，因此考虑到触发器中的所有内容，您所声明的内容可能在很短的毫秒内为真

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

您所说的明显延迟应该是不明显的。我认为延迟是由其他地方造成的。 (假设您需要在 this.setState({}) 之前运行一些其他同步代码。请向我们展示更多相关代码，以便我们更好地掌握正在发生的情况。