Soy bastante nuevo en reaccionar, y he creado un programa con varios botones que deben habilitarse uno por uno, cuando se hace clic en otro botón. Cada vez que cambio manualmente los valores de la matriz de verdadero a falso, los botones aparecen, pero no cuando ejecuto una función que se vincula a otro botón.
Matriz y función enableObject:
var counter = 0; var disabledArray = [true, true, true, true, true, true, true, true]; function enableObject() { disabledArray[counter] = false; counter++ }Botón que habilita otros botones:
<Button Button variant="outlined" color="primary" type="submit" onClick={enableObject}>Add a new financial object</Button>Ejemplo de un botón que necesita ser habilitado:
<Button Button variant="contained" color="primary" type="submit" onClick={() => setButtonPopup(true)} disabled={disabledArray[0]}> Object 1 </Button>Simplemente no entiendo muy bien si necesito hacer otra matriz, o qué hacer exactamente para que funcione. Quiero decir, la matriz no puede ser editada exactamente por el programa en sí, ¿verdad? Simplemente no veo ninguna otra solución a esto.
PD: estoy usando Material-UI, así que no te confundas con los botones, etc.
En primer lugar, no está utilizando React-States. Los estados son importantes porque cambiarlos fuerza un nuevo renderizado. Necesita esto para que cambie el estado de su botón (habilitado / deshabilitado). Sin un nuevo renderizado, su (s) botón (es) simplemente permanecerán deshabilitados.
Al usar React States, debe tratarlos como inmutables. Entonces, si cambia su matriz en la variable de estado, necesitará crear una nueva matriz. De lo contrario, reaccionar no nota el cambio de estado y volverá a tener el mismo problema.
Aquí hay una solución de ejemplo simple que usa una reacción de estilo funcional para lo que está tratando de hacer:
function Example() { const [counter, setCounter] = useState(0); const [disabledArray, setDisabledArray] = useState([true, true, true, true, true, true, true, true]); function enableObject() { const clone = [...disabledArray]; clone[counter] = false; setDisabledArray(clone); setCounter(counter++); } }El uso de state para mantener su matriz de valores booleanos le permitirá actualizar el dom cuando lo cambie. Dado que ya está actualizando el estado a través de la matriz, no es necesario hacerlo para el contador, ya que solo sería el doble de llamadas al estado. Por lo tanto, sigue siendo una variable normal.
Si se hace a través del componente de clase, los pondría a ambos en el estado.
const Component = () => { const [array, updateArray] = useState([true, true, true, true, true, true, true, true]); let counter = 0; const enableObject = () => { const tmpArray = array counter++ tmpArray[counter] = false updateArray(tmpArray) } return ( <React.Fragment> <Button Button variant="outlined" color="primary" type="submit" onClick={enableObject}>Add a new financial object</Button> {array.map((isDisabled) => { return ( <Button Button variant="contained" color="primary" type="submit" onClick={() => setButtonPopup(true)} disabled={isDisabled}> Object 1 </Button> ) })} </React.Fragment> ) }