我认为，这是一个奇怪的修复，它对我来说工作顺利.所以，而不是handleChange我使用handleClick.我没有在这里使用事件，相反，我传递一个字符串，这显然是状态的名称或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，但问题仍然存在。我希望这个问题能很快得到解决。

我在WordPress管理区域的Checkbox和Switch也遇到了同样的问题。
原来，有一个全局CSS规则：

input[type="checkbox"] {
  height: 1rem;
  width: 1rem;
}

不过，单击元素的左上角也可以。
作为一个解决方案，我在我的应用程序根中重置了一些样式。

• 编辑：* 没关系，我只是把我的整个应用程序到影子DOM.有几个gotchas，我会在这里列出：

1.你必须在shadow DOM中为Material-UI样式的元素提供一个自定义的插入点。一般来说，你必须在shadow DOM之外放置任何东西。
1.你必须在shadow DOM内部和shadow DOM外部（light DOM）加载/链接字体。
1.使用ScopedCssBaseline代替全局复位。
1.对话框必须指定其container属性。
这是我如何设置Material-UI的：

// configure-shadow-dom.js

import { create } from 'jss';
import { jssPreset } from '@material-ui/core/styles';

const shadowHostId = 'my-app-root-id'

export const appRoot = document.createElement('div')
appRoot.setAttribute('id', 'app-root')

const styleInsertionPoint = document.createComment('jss-insertion-point')
export const jss = create({
    ...jssPreset(),
    insertionPoint: styleInsertionPoint,
})

const robotoFontLink = document.createElement('link')
robotoFontLink.setAttribute('rel', 'stylesheet')
robotoFontLink.setAttribute('href', 'https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap')

const shadowHost = document.getElementById(shadowHostId)
shadowHost.attachShadow({ mode: 'open' })

const shadowRoot = shadowHost.shadowRoot
shadowRoot.appendChild(robotoFontLink)
shadowRoot.appendChild(styleInsertionPoint)
shadowRoot.appendChild(appRoot)

// index.jsx

import React from 'react';
import ReactDOM from 'react-dom';
import ScopedCssBaseline from '@material-ui/core/ScopedCssBaseline';
import { StylesProvider } from '@material-ui/core/styles';
import App from './App';
import { jss, appRoot } from './configure-shadow-dom';

ReactDOM.render(
    <React.StrictMode>
        <StylesProvider jss={jss}>
            <ScopedCssBaseline>
                <App />
            </ScopedCssBaseline>
        </StylesProvider>
    </React.StrictMode>,
    appRoot
);

在我的例子中，页面中有一个CSS，类似于

.some-component { pointer-events: none; }
.some-component * { pointer-events: auto; }

其中.some-component包含我的material-ui按钮和开关。我不得不手动将pointer-events设置为all（或某个值，我现在不记得了），用于开关内部的元素。
所以，这是一件需要注意的事情：检查pointer-events样式正在执行的操作。

在Switch组件中，将onChange更改为onClick对我很有效：

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

仍然遇到类似的问题，从开关获取事件。这里有一个使用内部状态的快速修复（你现在应该使用钩子和功能组件，如果没有，你会错过，但你可以使用setState来做我在这里展示的类组件。

const [switchChecked, setSwitchChecked] = useState(false);

.......

<Switch checked={switchChecked} onChange={() => {setSwitchChecked(!switchChecked);}}/>

你需要在组件的本地状态中有一个switchChecked的值。

尝试将这个已检查或未检查的参数作为第二个参数传递。

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

问题是你必须从事件中嗅探checked属性：event.target.checked
完整解决方案：

import { Switch } from '@material-ui/core';
import { useState } from 'react';

function App() {
  const [checked, setChecked] = useState(false);

  const switchHandler = (event) => {
    //THIS IS THE SOLUTION - use event.target.checked to get value of switch
    setChecked(event.target.checked);
  };

  return (
    <div>
      <Switch checked={checked} onChange={switchHandler} />
    </div>
  );
}

export default App;

在浪费了1个小时之后，我知道switch正在e.target.checked处提供值，单击时会切换（true/false）

const [taxIncluded, setTaxIncluded] =useState(false)
       const taxIncludeChange = (e) => {
    console.log(e.target.checked, 'checked value here (true/false)');
  };
<Switch onChange={taxIncludeChange} value={taxIncluded} color="primary" />