Deshabilitando botón

Apuntes cortos y para toda la familia xD
.

1. 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

2. 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.

3. 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)

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 😎

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} />}

Me parece muy interesante el atributo de deshabilitar

Qué buena clase!

Excelente clase, me pareció muy interesante. 🙂

Buena clase

Que interesante

un buena clase

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} />)}

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

Excelente clase