Senden von großen Formularen mit react.js

Question

Es ist ein Schmerz, mit react.js zu arbeiten, wenn es um die Form geht. Ich war von eckig, weil es zwei Möglichkeiten gibt, Dinge zu binden, die großartig sind, es ist schnell, Dinge zu integrieren. Aber wenn ich reagiere, gebe ich zu, dass ich verloren bin.

sagt es ein Benutzerprofil ist, ich diese Daten von API

var profile = { 
    name:"Gaila", 
    age:22, 
    skills: [{id:1,name:"react"},{id:1,name:"angular"}], 
    club: [{id:1,name:"dancing"},{id:1,name:"hiking"}], 
    description: "some long string" 
}; 

Ich habe auf der Benutzeroberfläche bekam text input, textarea, checkbox und select.

Wie würde ich damit umgehen, wenn Benutzer zum Speichern geklickt hat? Muss ich jedes einzelne Eingabeelement mit onChange verbinden? wie handleNameChange, handleAgeChange, handleSkillsChange .. omg es ist lächerlich.

So ref kam mir in den Sinn, einfach nur ref="name" tun und ich kann es erhalten, indem ReactDOM.findDOMNode(this.refs.name).value, aber warten, ist es nicht auf <select> funktioniert, dann ist es schlecht irgendwann ich ref verwenden, manchmal gehe ich mit Griff-Funktion.

Jungs, ich brauche ernsthaft, wirklich Hilfe!

Answer 1

Hier ein Beispiel ist eine Ereignisbehandlungsroutine der Wiederverwendung und Aufnehmen die Unterschiede zum Event. Sehen Sie es in Aktion bei codepen.

const FormFunc =() => { 

    const changeHandler = (e) => { 
    console.log(`e.target.name, name: `, e.target.name, e.target.value) 
    } 
    return (
    <form> 
     <input onChange={changeHandler} type='text' name='firstName' /> 
     <input onChange={changeHandler} type='text' name='surname' /> 
     <input onChange={changeHandler} type='phone' name='phone' /> 
     <input onChange={changeHandler} type='email' name='email' /> 
    </form> 
) 
} 

Answer 2

Wenn Sie nur Formularwerte extrahieren müssen, können Sie form-serialize verwenden - es ist als Paket über npm verfügbar.

In Ihrer Komponente, fügen Sie einen einreichen Termin in Ihrem Formular:

<form onSubmit={this.handleSubmit}> 

Der Handler extrahiert die Form etwa so:

handleSubmit = (event) => { 
    event.preventDefault() 
    const values = serializeForm(event.target, { hash: true }) 
    console.log(values) 
}