Deshabilitando botón

Clase 50 de 57 • Curso de Redux por Bedu

Contenido del curso

Bienvenido al curso

Repaso React

Introducción a Redux

11
¿Qúe es Redux, cuándo usarlo y por qué?
00:15 min

Fases de Redux

Fases Extra

Compartir información en Redux

Métodos HTTP

Conclusión

Tomar examen

Comentarios

Willy David Da Conceicao Lozada

student•

Apuntes cortos y para toda la familia xD .

Al botón de guardar en el componente Guardar.js le añadimos un atributo disabled que este me desactiva el botón si la expresión me retorna true, la función se llama deshabilitar y esta retorna true si no se ha escrito todavía en los dos inputs
Cuando se le di click al botón manejare los estados de la petición de tipo post colocando el spinner si esta cargando o si hay un error.
En los dispatchs y en los casos de los actions coloco las constantes del archivo types en vez de usar strings asi me evito dolores de cabeza xD .

Conclusión: deshabilitamos el botón cuando no hay nada en los inputs y colocamos el spinner o error cuando se ejecute la petición de tipo post (justo debajo del botón)

ANTHONY JEAMPIER RANGEL RODRIGUEZ

student•

Gracias por el aporte!

Ivan Santiago

student•

Otra manera de des-habilitar el botón sería agregando a los atributos del botón una condicional. Quedaría algo así:

<button disabled={!this.props.usuario_id && !this.props.titulo}>Guardar</button>

Si !this.props.usuario_id es verdadero (o sea que está vacío), y !this.props.titulo es verdadero (o sea que también está vacío) el botón aparecerá deshabilitado 😎

Valentina Fernández Rada

student•

Lo hice de la siguiente manera

  {loading ? (
          <Loader />
        ) : (
          <button
            type="submit"
            disabled={!isFormValid()}
            className="btn btn-primary"
            onClick={save}
          >
            Submit
          </button>
        )}
{error && <PageError error={error} />}

Juan Felipe Salamanca Gonzalez

student•

Me parece muy interesante el atributo de deshabilitar

Luis Gerardo López Hernández

student•

cual es la diferencia entre poner o no ( ), que no se corre la funcion de todos modos?

&lt;button onClick={this.guardar} disabled={this.deshabilitar()}&gt;

Iván Darío Sánchez Jiménez

student•

Son dos casos diferentes cuando agrega myfunction() usando los parentesis, esta llamando la función para su ejecución. Por eso daría error si llegara usarla en el evento onClick de la forma

onClick={this.guardar()}

Para el caso del disabled esta ejecutando la función cuando presenta el elemento.

Luis Gerardo López Hernández

student•

Perfecto gracias!

Luis Gerardo López Hernández

student•

Cual es la diferencia entre poner o no ( )

                &lt;button onClick={this.guardar} disabled={this.deshabilitar()}&gt;

Que no de todos modos se corre la funcion en los dos?

Andrés Felipe Eslava Zuluaga

student•

Qué buena clase!

Cristian Andres Ladino Peña

student•

Excelente clase, me pareció muy interesante. 🙂

Frank Antonio Piñin Ato

student•

Buena clase

Melissa González Nebrijo

student•

Que interesante

Johan García Trejo

student•

un buena clase

Manuel Rivera

student•

Agregue las siguientes líneas de código para evitar crear la función local, debajo de la etiqueta button donde Rodolfo llama la función

{(this.props.Loading && <MiniLoading />) ||
  (this.props.Error && <ErrorComment error={this.props.Error} />)}

Grace Nikole Avarado

student•

Aquí pueden encontrar más detalles del Redirect de react-router:

Paul Cortes

student•

Excelente clase

  {loading ? (
          <Loader />
        ) : (
          <button
            type="submit"
            disabled={!isFormValid()}
            className="btn btn-primary"
            onClick={save}
          >
            Submit
          </button>
        )}
{error && <PageError error={error} />}

Deshabilitando botón

Bienvenido al curso

Conoce a tu profesor y todo lo que aprenderás sobre Redux

¿Qué conocimientos me recomiendan para tomar este curso?

Repaso React

¿Qué es React y cómo funciona?

Preparando nuestro entorno de trabajo

Creación de la app con React

Agregando funciones a la app con React

Stateful vs Stateless

Ciclo de vida de React

Manejando promesas

React Router DOM

Introducción a Redux

¿Qúe es Redux, cuándo usarlo y por qué?

Fases de Redux

Introducción: las fases de Redux

Store

Reducers

Conexión a un componente

Action Creators

Redux Thunk

Explicación teórica: ciclo completo de Redux

Práctica: ciclo completo de Redux

Fases Extra

Archivos Types

Try Catch

Escenarios asíncronos

Componente Spinner

Componente Fatal

Tabla como componente

Compartir información en Redux

Introducción Compartir información en Redux

Parámetros por URL

Compartir Reducer

Múltiples Reducers

Llamando a múltiples reducers en una acción

Uso del estado en la acción

Evitar segundas búsquedas

Inmutabilidad

Evitar sobrescritura

Validación compuesta

Validación de errores

Modificando respuesta de url

Estado con interacción

Mostrar componentes dinámicamente

Llamadas asincronas dinámicas

Props por herencia vs estado

Estado compartido

Métodos HTTP

Introducción a métodos HTTP

Nuevo ciclo Redux

Normalizar datos

Mapear Objetos

Componente para agregar tarea

Manejar inputs con Reducer

POST

Deshabilitando botón

Redireccionar

Reutilizar componentes

PUT

DELETE

Últimos detalles

Conclusión

Conocimientos adquiridos

Qué hacer a continuación