Tengo un botón y quiero deshabilitarlo cuando alguno de los campos de entrada está vacío.
A continuación no funciona. Si todos los campos de entrada están vacíos, devuelve verdadero, que es correcto. Pero si solo se llena un campo de entrada, devuelve falso, que no es correcto. Debería devolver verdadero hasta que se llenen todos los campos.
<Button disabled={Object.values(values).every(x => x === "")} onClick={handleSubmit}> Submit </Button> A continuación funciona correctamente, pero ESlint arroja un error.
<Button disabled={Object.values(values).every(function () { for (let key in values) { if (values[key] === "") return true; } return false; })} onClick={handleSubmit}> Submit </Button> ESlint error:
for..in loops iterate over the entire prototype chain, which is virtually never what you want. Use Object.{keys,values,entries}, and iterate over the resulting array no-restricted-syntax
¿Cómo puedo corregir la funcionalidad disabled ?
values={{ testData1: '', testData2: '', testData3: ''}}
Object.values(values) devuelve una matriz, por lo que puede iterar sobre ella con for..of .
El siguiente código es equivalente al suyo (suponiendo que los valores sean un objeto plano), pero se usa for..of en lugar de for..in y, por lo tanto, debería verse bien a los ojos de ESlint:
<Button disabled={function () { for (const val of Object.values(values)) { if (val === "") return true; } return false; }} onClick={handleSubmit}> Submit </Button>Editar: este fragmento debería funcionar para objetos anidados:
<Button disabled={ function findEmpty(arg) { for (i in arg) { if (typeof arg[i] === 'object') { return findEmpty(arg[i]); } if (arg[i] == "") { return true; } } return false } findEmpty(values); } onClick={handleSubmit}> Submit </Button>Cambio,
disabled={Object.values(values).every(x => x === "")}
A:
disabled={Object.values(values).some(x => x === "")}
Motivo del cambio:
El método every comprueba si todos los elementos de la matriz pasan la prueba.
Entonces, en su caso, al usar
everycontroles si todo el valor está vacío, y como dijo que el estado inicial estaba funcionando (en carga) porque en el procesamiento inicial, todo el valor estará vacío y, por lo tanto, esta prueba pasa (y devuelve verdadero) pero una vez que tenga algún valor, devolverá falso porque tiene uno de los valores.
Mientras que Some , por otro lado, verifica si al menos uno de los elementos de la matriz pasa la prueba.
Aquí necesitamos usar
someporque verificará si al menos uno de los valores está vacío o no. Devolverá verdadero hasta que se llenen todos los valores. Si todos los campos están llenos, devolverá falso.