Le gestionnaire onChange du composant Material-ui Switch ne se déclenche pas

Je pense que c'est une solution bizarre et cela fonctionne bien pour moi. Donc, au lieu de handleChange, j'utilise handleClick. Je n'utilise pas event ici, à la place je passe une chaîne qui est évidemment le nom de l'état ou l'id dans le cas des tableaux.

<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 });
};

J'ai essayé handleChange, mais le problème persiste. J'espère que cela sera bientôt résolu.

Il s'avère que dans mon cas, il y avait un CSS dans la page, quelque chose comme

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

où .some-component contenait mon matériel-ui boutons et interrupteurs. J'ai dû définir manuellement pointer-events sur all (ou une valeur, je ne me souviens pas pour le moment) pour les éléments à l'intérieur des commutateurs.

Donc, c'est une chose à surveiller: vérifiez ce que fait le style pointer-events .

dans le composant Switch, le passage de onChange à onClick a fonctionné pour moi:

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

J'ai eu le même problème avec Checkbox et Switch dans la zone d'administration WordPress .

En fait, il y avait globale comme:

// 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
);

En cliquant sur le coin supérieur gauche de l'élément fonctionne, cependant.

Comme solution, je réinitialiser certains styles dans la racine de mon application.

EDIT: Nevermind, je viens de mettre toute mon application dans shadow DOM . Il y a quelques pièges, je vais les lister ici:

1. Vous devez fournir un point d'insertion personnalisé pour les éléments de style Material-UI à l'intérieur du DOM shadow. En général, vous devez faire en sorte que rien ne soit mis en dehors de votre DOM shadow.
2. Vous devez charger / lier la police à l'intérieur du DOM shadow et à l'extérieur du DOM shadow (le DOM light).
3. Utilisez ScopedCssBaseline au lieu de la réinitialisation globale.
4. Les boîtes de dialogue doivent avoir leur conteneur prop spécifié.

Voici comment j'ai configuré les choses avec Material-UI:

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