我在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}
这会触发一些speechSynthesis回放,这有时需要一段时间。问题是我想让用户意识到正在发生的事情。然而,该按钮并不会立即改变其样式。只要我触发其他东西,无论是通过如上所述的子对象的直通属性,还是通过触发redux操作,它仍然会延迟几秒钟更改颜色。
我想立即更改颜色而不延迟,这样用户就知道不再重复推送它。我如何才能做到这一点呢?
发布于 2018-06-12 03:17:42
我不确定这是否是"react“方式,但我想出了一个可行的解决方案。我拆分了我传递的属性,以便从按钮切换中打开播放器。
state = {
buttonOn: false,
play: false
}
按钮属性与上面相同,但会随着buttonOn状态的变化而变化。
ChildComponent属性:...play={this.state.play}
然后,在按钮切换事件中,我等待半秒后才更改播放状态。这是为了让按钮立即更新它的样式,然后所有播放器的东西都可以在一个滴答之后运行。
togglePlay = (newValue) => {
this.setState({play: newValue});
}
toggleSpeak = (e) => {
let newValue = !this.state.buttonOn;
this.setState({buttonOn: newValue});
if (this.state.play != newValue) {
setTimeout(function() {
this.togglePlay(newValue);
}.bind(this), 500);
}
当然,在卸载时清除超时函数:
componentWillUnmount() {
clearTimeout(this.togglePlay);
}
发布于 2018-06-11 07:49:00
你在渲染中做speechSynthesis吗?在切换按钮之后,您应该调用执行speechSynthesis的函数。就UX而言,我建议你在做一项可能需要一些时间才能完成的任务时,显示一个加载指示器。此外,您还可以禁用该按钮,直到speechSynthesis完成。
toggleSpeak = () => {
if(!this.state.doingSpeechSynthesis) {
this.setState(
{buttonOn: !this.state.buttonOn, doingSpeechSynthesis: true},
() => speechSynthesis(args, this.setState{doingSpeechSynthesis: false}));
}
}
发布于 2018-06-11 07:54:33
this.setState({})
函数确实是异步的,因此考虑到触发器中包含的所有内容,在很短的几毫秒内,您所声称的可能是真的
toggleSpeak = () => {
this.setState({buttonOn: !this.state.buttonOn});
}
你所说的明显的延迟应该是不可察觉的。我会认为延迟是从其他地方强加的。(假设您需要在this.setState({})
之前运行一些其他同步代码。一定要向我们展示更多相关的代码,这样我们才能更好地掌握正在发生的事情。
https://stackoverflow.com/questions/50788885
复制相似问题