Empresas
Empleos
  • Sobre nosotros
  • Soluciones
    • Publicación de vacantes
      Publica tu vacante y recibe candidatos calificados en 48h.
    • Evaluación de candidatos
      500+ pruebas técnicas y psicológicas, más anti-fraude.
    • Headhunting
      Búsqueda ejecutiva a la medida de principio a fin.
    • Nómina + EOR
      Dispersión de nómina y EOR en más de 15 países de LATAM.
  • Precios
  • Empleos

0

350
Vistas
¿Cómo puedo usar formularios anidados en ReactJS?

Considere este fragmento de código:

 <%= form_for @survey do |f| %> <%= f.error_messages %> <p> <%= f.label :name %><br /> <%= f.text_field :name %> </p> <%= f.fields_for :questions do |builder| %> <%= render "question_fields", :f => builder %> <% end %> <p><%= f.submit "Submit" %></p> <% end %>

me devolverá algo de hash (el desarrollador de Rails lo sabría). Mi pregunta es ¿cómo puedo hacer este formato en ReactJS? Para recibir exactamente los mismos parámetros que Rails realiza por defecto. Por ahora solo puedo usar la etiqueta HTML en JSX. Actualmente recibo parámetros en el controlador y los clasifico según las necesidades (lo que parece un mal enfoque). ¡He probado algunos de los paquetes npm pero sus documentos no parecen ayudar! que incluyen: https://www.npmjs.com/package/react-rails-form-helpers

https://www.npmjs.com/package/react-form

¿Hay algún paquete npm para esto? Usando la gema react_on_rails con Rails 5 estable

over 4 years ago · Santiago Trujillo
1 Respuestas
Responde la pregunta

0

Terminé con entradas escritas manualmente, sin control desde el punto de vista de reactjs.

 <input type="text" name={`listing[working_time_slots_attributes][${value}][from]`} defaultValue={timeSlot.from} />

Y axios, forma-serializar npm.

 import axios from 'axios'; import serialize from 'form-serialize'; handleSubmit(event) { event.preventDefault(); const formData = serialize(event.target, { hash: true }); // alert(`A data was submitted: ${JSON.stringify(formData, null, 2)}`); axios.post(`/api/listings/${this.props.listing.id}/update_working_time_slots`, formData) .then((response) => { this.setState({ timeSlots: response.data.working_time_slots }); // eslint-disable-line react/no-set-state console.log(response); // eslint-disable-line no-console }) .catch((error) => { console.log(error); // eslint-disable-line no-console }); }
over 4 years ago · Santiago Trujillo Denunciar
Responde la pregunta
Encuentra empleos remotos

¡Descubre la nueva forma de encontrar empleo!

Top de empleos
Top categorías de empleo
Empresas
Publicar vacante Precios Comercial
Legal
Términos y condiciones Política de privacidad
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Recomiéndame algunas ofertas
Necesito ayuda