erhalten Variablen über ihren Namen in reagieren

Question

Ich muss den Wert des Eingabeelements zu einer Variablen zuweisen, meine Form enthält sagen, 10 Eingänge mit jeweils eindeutige ID und die gleiche Anzahl von Variablen mit dem gleichen Namen wie der Eingabe-IDs, weiter habe ich zugewiesen eine Funktion saveChanges() an allen Eingängen onChange Attribut der Klasse wie dieses wäre hilfreich

class MainClass extends React.Component { 
    render() { 
     var field1 = ""; 
     var field2 = ""; 
     var date1 = ""; 
     var description = ""; 
     //... 
     function saveChanges() { 
      document.getElementsByClassName("inputs").onchange = function (event) { 
       // tried to use window["variable name"] to access the variables but page broke and goes into repetitive reload 
       // need to know that is there any other method to save the changed value to respective variable 
       window[event.target.id] = event.target.value; 
      } 
     } 
     function sendDetails() { 
      // use the values of the variables and send through rest api 
     } 
     return (
      <div> 
       lable1: 
       <input id="field1" className="inputs" type="text" onChange={saveChanges } /><br /> 
       lable2: 
       <input id="field2" className="inputs" type="text" onChange={saveChanges } /><br /> 
       date1: 
       <input id="date1" className="inputs" type="text" onChange={saveChanges } /><br /> 
       Description: 
       <textarea id="discription" className="inputs" onChange={saveChanges }> 
       </textarea> 
       //... 
       <button id="sendDetails" onClick={sendDetails }> 
        Send 
       </button> 
      </div> 
     ); 
    } 
} 

Anregungen zu diesem Thema geht.

Answer 1

Sie können Namen auf Ihre Eingaben geben, und erhalten Sie Zugriff auf sie mit event.target.name:

class MainClass extends React.Component { 
    render() { 
     var field1 = ""; 
     var field2 = ""; 
     var date1 = ""; 
     var description = ""; 
     //... 
     function saveChanges(e) { 
      this.setState({[e.target.name]: e.target.value}); 
     } 
     function sendDetails() { 
      // use the values of the variables and send through rest api 
      console.log(this.state); 
     } 
     return (
      <div> 
       lable1: 
       <input id="field1" name="field1" className="inputs" type="text" onChange={saveChanges } /><br /> 
       lable2: 
       <input id="field2" name="field2" className="inputs" type="text" onChange={saveChanges } /><br /> 
       date1: 
       <input id="date1" name="date1" className="inputs" type="text" onChange={saveChanges } /><br /> 
       Description: 
       <textarea id="discription" className="inputs" onChange={saveChanges }> 
       </textarea> 
       //... 
       <button id="sendDetails" onClick={sendDetails }> 
        Send 
       </button> 
      </div> 
     ); 
    } 
}