如何解决 Material-UI ToggleButtonGroup 中的长时间延迟问题？

Question

我正在将一个应用程序从 React-Bootstrap 迁移到 Material-UI。主要是一种积极的体验，但我的切换按钮组非常慢。比如 3 秒以上来响应点击。我想如果我把它剥离到最低限度，问题就会消失，但事实并非如此。（确实有所改善；我认为之前的延迟是 5-7 秒。）Here is the sandbox.

它显示两个切换按钮，“静音”和“打开”。如果单击按钮，事件处理程序需要 3 秒以上的时间才能在控制台上记录调用。大多数情况下，视觉上更改状态需要花费大量时间，但在某些情况下，其中一个按钮会在您单击时立即更改状态，而另一个按钮会在更改状态之前延迟。但是，即使在那种情况下，控制台日志也会延迟，并且更改回另一个按钮也会延迟。

这是组件的 JSX：

    <ToggleButtonGroup value={toggle} onChange={onMicToggle} exclusive>
      <ToggleButton value="mute">mute</ToggleButton>
      <ToggleButton value="on">on</ToggleButton>
    </ToggleButtonGroup>

这里是调用代码：

    <MicControl
      toggle={toggle}
      onMicToggle={(e, v) => {
        setToggle(v);
        console.log("onMicToggle:", e, "Value:", v);
      }}
    />

非常感谢任何修复或解决方法！

Answer 1

只需从您的 onChange 回调函数中删除 console.log("onMicToggle:", e, "Value:", v);

如何解决 Material-UI ToggleButtonGroup 中的长时间延迟问题？

How can I fix this long delay in a Material-UI ToggleButtonGroup?

togglebutton

reactjs

material-ui