Material-ui 的 Switch 组件 onChange 处理程序未触发

Question

我Switch在应用程序中放入了一些es，它们运行良好。然后我将开关放在另一个应用程序中，但单击时它们不起作用。

两个应用程序都使用相同的组件。这是在一个应用程序中工作的：

这是另一个应用程序，不起作用：

在第二个应用程序中，onChange处理程序似乎永远不会触发。

这两个应用程序中的代码如下所示：

<Switch
  checked={(console.log('checked:', status === 'visible'), status === 'visible')}
  onChange={(e, c) => console.log('event:', e, c)}
/>

在第一个应用程序中，我看到了那些console.logs的输出，而在第二个应用程序中，我只看到console.log了checked道具的首字母，但我从未看到任何onChange道具。

我检查了是否有任何祖先元素有click处理程序，但我没有找到任何返回false、调用stopPropagation或调用的元素preventDefault。

请注意，在 gif 中，当我单击时，涟漪效应仍然有效，因此单击处理显然仍然有效。

任何想法为什么onChange可能不会被解雇？

更新！我用常规<input type="checkbox">元素替换了开关，效果很好！看：

在我看来，material-ui 的<Switch>组件有问题。我有一种预感，当我有机会时，我会进行调查：React应用程序中可能有多个单身人士。我会回来发布更新。

Answer 1

我认为，这是一个奇怪的修复，但对我来说工作顺利。因此，我使用的是handleClick，而不是handleChange。我在这里没有使用事件，而是传递一个字符串，它显然是状态的名称或数组的 id。

<Switch
    checked={this.state.active}
    onClick={() => this.handleToggle('active')}
    value="active"
    inputProps={{ 'aria-label': 'secondary checkbox' }}
/>

handleToggle = (name: string) => {
    this.setState({ active: !this.state.active });
};

我尝试了handleChange，但问题仍然存在。我希望这个问题能尽快得到解决。