0
242
Vistasdesactivar otro botón en reaccionar js
Tengo un proyecto React que tiene tres botones. Cuando hago clic en un botón, por ejemplo, hago clic en el segundo botón, registrará "esto es del botón dos". seguido de un número aleatorio con intervalo de tiempo de 500ms. Mi objetivo es cuando hago clic en un botón, otros botones se desactivarán, ¿cómo hacer esto? Gracias por adelantado.
Esta es mi aplicación.js
import './App.css'; import { Button1 } from './Button1.React'; import { Button2 } from './Button2.React'; import { Button3 } from './Button3.React'; function App() { return ( <div className="App"> <Button1>log one</Button1> <Button2>log two</Button2> <Button3>log three</Button3> </div> ); } export default App;este es mi Button1.React.jsx
import React from "react"; export const Button1 = ({ children, type, doStuff1 = ()=> { console.log("this is button one ", Math.random().toFixed(1)); setTimeout(doStuff1, 500); }, })=>{ return ( <button onClick={doStuff1} type={type}> {children} </button> ) };este es mi Button2.React.jsx
import React from "react"; export const Button2 = ({ children, type, doStuff2 = ()=> { console.log("this is button two ", Math.random().toFixed(1)); setTimeout(doStuff2, 500); } })=>{ return ( <button onClick={doStuff2}type={type}> {children} </button> ) };este es mi Button3.React.jsx
import React, { Children } from "react"; export const Button3 = ({ children, type, doStuff3 = ()=> { console.log("this is button three ", Math.random().toFixed(1)); setTimeout(doStuff3, 500); } })=>{ return ( <button onClick={doStuff3}type={type}> {children} </button> ) }; y aquí está la captura de pantalla de la página renderizada 
Me dijeron que hacer esto es usar useState que devuelve una condición booleana para deshabilitar/habilitar el clic, pero no sé cómo hacerlo.
3 Respuestas
Responde la pregunta0
function App() { const [bool1, setBool1] = useState(false); const [bool2, setBool2] = useState(false); const onClickBtn1 = () => { // your other codes when btn 1 is clicked // ------ setBool2(true); //disable button 2 } const onClickBtn2 = () => { // your codes when btn 2 is clicked // ------ setBool1(true); //disable button 1 } return ( <div className="App"> <button onClick={onClickBtn1} disabled={bool1}>Button 1</button> <button onClick={onClickBtn2} disabled={bool2}>Button 2</button> </div> ); }Básicamente, usa disabled en el elemento del botón, el valor de disabled debe estar en el estado para que la aplicación se vuelva a procesar si su valor cambia. Finalmente, cambie el valor del estado en el controlador onClick del botón. Debe aprender a usar React Hooks para esto, ya que dijo que no sabe useState.
0
¿Es esto lo que intentas hacer?
import React, { useState } from "react"; const Button = ({ children, type, disabled, doStuff }) => { return ( <button onClick={doStuff} type={type} disabled={disabled}> {children} </button> ); }; export default function Name() { const [activeButton, setActiveButton] = useState(); const disableOtherButtons = (currentButton) => { if (activeButton === currentButton) { setActiveButton() } else { setActiveButton(currentButton) } } const doStuff1 = () => { console.log("this is button one ", Math.random().toFixed(1)); disableOtherButtons('button1'); }; const doStuff2 = () => { console.log("this is button one ", Math.random().toFixed(1)); disableOtherButtons("button2"); }; const doStuff3 = () => { console.log("this is button one ", Math.random().toFixed(1)); disableOtherButtons("button3"); }; return ( <div> <Button doStuff={doStuff1} disabled={activeButton && activeButton !== "button1"} > Button1 </Button> <Button doStuff={doStuff2} disabled={activeButton && activeButton !== "button2"} > Button2 </Button> <Button doStuff={doStuff3} disabled={activeButton && activeButton !== "button3"} > Button2 </Button> </div> ); }0
Puede pasar la referencia useState a los botones
import { useRef } from 'react'; import './App.css'; import { Button1 } from './Button1.React'; import { Button2 } from './Button2.React'; import { Button3 } from './Button3.React'; function App() { const [ btn1, setBtn1 ] = useState(false) // by default disabled will be set to false const [ btn2, setBtn3 ] = useState(false) const [ btn3, setBtn3 ] = useState(false) const actions = [ setBtn1, setBtn2, setBtn3 ] return ( <div className="App"> <Button1 actions={actions} disabled={btn1}>log one</Button1> <Button2 actions={actions} disabled={btn2}>log two</Button2> <Button3 actions={actions} disabled={btn3}>log three</Button3> </div> ); } export default App;y para los botones, debe aceptar esos parámetros y trabajar con ellos
import React from "react"; export const Button1 = (props) => { const { children, type, actions, disabled } = props const doStuff = () => { actions[0](false); // this will set Button1 to disabled console.log("this is button three ", Math.random().toFixed(1)); setTimeout(doStuff3, 500); } return ( <button onClick={doStuff} type={type} disabled={disabled}> {children} </button> ) }; Puedo ver que haces setTimeout(doStuff3, 500); dentro de la función que hace referencia a una función indefinida, es posible que desee definirlos en App.js y pasarlos como props a los botones