0

Buenas tardes, tengo este formulario en mi render

  <form className="form-horizontal" role="form">

                   <p><input type="text" className="form-control" 
                    id="name" placeholder="Name" required/></p>
                    <input type="submit" value="send" />

    </form>

Y en mi api tengo una url por post que seria localhost:3000/api/categories/create/:nombre en nombre iria el nombre ingresado en el formulario. Cual es la mejor forma de hacer esto en React?

1 respuesta 1

4

Veo que tienes dudas sobre "buenas prácticas" en React. Todas ellas se pueden despejar si:

De preferencia tomarle mayor atención a artículos de personalidades que manejan bien el tema.


Hacer un submit en React es igual que en VanillaJS, no hay mayor misterio. Si bien en React los eventos no son nativos, a nivel de funcionalidad no hay mayores diferencias.

<form onSubmit={this.onSubmit.bind(this)}>
  <input type="text" value={this.state.name} onChange={this.onInputChange.bind(this)} />
  <button type="submit">Enviar nombre</button>
</form>

...
onInputChange (e) {
  this.setState({ name: e.target.value });
}

onSubmit (e) {
  fetch (`localhost:3000/api/categories/create/${this.state.name}`, {
    method: 'POST'
  })
  .then(res => res.json())
  .then(res => {
    if (res.success) { // exito
      alert('Categoría creada');
    }
  });
}

Cuando tratamos con formularios por lo general tendemos a hablar de componentes controlados y no controlados. Un componente no controlado es un elemento autocontrolado sin depender ni estar sincronizado con un contexto. Puedes pensar en un <input type="text" value="Hola"/> como un componente no controlado.

Por otro lado, un componente controlado es aquel que es controlado por un contexto, manteniéndose siempre sincronizado con éste, por ejemplo: <input type="text" value={this.state.name} onChange={this.onInputChange.bind(this)} />. En éste enlace puedes ver un post que habla de ésto.

Hacer un componente controlado tiene muchas ventajas en comparación de un no controlado; ergo, no es un "debe ser", si no un "podría ser". Algunas ventajas para formularios son:

  • validación instantánea
  • cambio de estado automáticamente (por ejemplo, en el caso de un botón)
  • forzar un formato de entrada (e incluso cambiarlo en tiempo real)
2
  • 1
    Perfecto, funciono y muchas gracias por tomarte el tiempo de darme info para aprender :) el 13 ene. 2017 a las 19:45
  • Un gusto, Santiago.
    – gugadev
    el 13 ene. 2017 a las 20:13

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.