Quiero hacer un botón de cambio/alternancia que deshabilite todos los botones de la aplicación y los habilite cuando se haga clic en Y el usuario escriba la contraseña correcta
handleToggleChange() { var elements=document.getElementsByClassName('MuiButtonBase-root'); var i; if (this.state.lock === false) { this.setState({lock: true}); for (i = 0; i < elements.length; i++) { elements[i].disabled = false; } } else { this.setState({lock: false}); for (i = 0; i < elements.length; i++) { elements[i].disabled = true; } } }Este es mi código ToggleButton
<ToggleButtonGroup onChange={this.handleToggleChange}> <FormControlLabel label={<Typography variant="caption">Unlock</Typography>} control={<ToggleButton id="togglebutton" size="small" value="false" color="secondary" style={{right: 5}} selected={this.state.lock === false ? false : true} > <CheckIcon /></ToggleButton>}/> </ToggleButtonGroup>El problema es que parece estar funcionando, pero en realidad no se desactivan, a pesar de que aparece la propiedad de desactivación cuando entro en el depurador. desactivado
Y luego la propiedad deshabilitada desaparece cuando el botón no está marcado. activado
Soy bastante nuevo en javascript, así que ni siquiera estoy seguro de si esta es la forma en que se supone que debo hacer algo como esto. Cualquier ayuda es apreciada.
Simplemente lograr esto en un solo nivel con accesorios es relativamente fácil. Sin embargo, para el estado de toda la aplicación que debe inyectarse en cualquier nivel, lo más probable es que desee aprovechar React Context , que es un estado conectado al ciclo de vida de React que se puede inyectar en cualquier nivel. A continuación se muestra un ejemplo que usa el useContext para crear un botón que se puede usar en cualquier lugar en cualquier nivel que se activará automáticamente si se ha cambiado el estado global deshabilitado:
// Get a hook function const { useContext, useState } = React; const GlobalDisabledStateContext = React.createContext({ disableUI: false }); const App = () => { const [disableUI, setDisableUI] = useState(false); return ( <GlobalDisabledStateContext.Provider value={{disableUI}}> <div> <h1>Hello world!</h1> <label for="toggleDisableUI"> Toggle Disabled UI <input type="checkbox" name="toggleDisableUI" id="toggleDisableUI" checked={disableUI} onChange={() => setDisableUI(!disableUI)} /> </label> <h2>Below is a button wired into the app context state, which can be used at any level without wiring app state through props</h2> <AppStateConnectedButton onClick={() => console.log('hi')}> Click Me </AppStateConnectedButton> </div> </GlobalDisabledStateContext.Provider> ); } const AppStateConnectedButton = (props) => { const { disableUI } = useContext(GlobalDisabledStateContext); return (<button disabled={disableUI} {...props} />); } // Render it ReactDOM.render( <App />, document.getElementById("react") ); <script src="https://cdnjs.cloudflare.com/ajax/libs/react/17.0.1/umd/react.production.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/17.0.1/umd/react-dom.production.min.js"></script> <div id="react"></div>Como señalé en los comentarios, cualquier tipo de manipulación de DOM en el contexto de un marco MV* como React o Angular es un antipatrón en el 99 % de los escenarios. La idea completa de los marcos MV * es que crea un modelo de datos, lo vincula a una vista y toda su lógica es actualizar el modelo de datos y dejar que la biblioteca maneje la actualización de la vista. Si alguna vez te encuentras interrogando o cambiando DOM en un marco MV*, es probable que estés haciendo algo mal.