Extrahieren von Daten von mehreren Eingaben in Form reagieren

Question

Also ich bin noch relativ neu in React. Ich möchte Daten von drei Formulareingaben erhalten (und eventuell in die Datenbank schreiben). Ich habe das Internet benutzt, um zu helfen, aber ich dachte, ich würde mein Glück hier versuchen. Genau hier versuche ich mich einfach auszuloggen, was der Benutzer in den Eingaben schreibt.

import React from 'react'; 

export default class AddForm extends React.Component { 
constructor(props) { 
super(props); 
} 

handlePlace(e) { 
e.preventDefault(); 
    const text = this.place.value.trim(); 
    console.log(text); 
} 

handleDate(e) { 
    const text = this.date.value 
    console.log(text); 
} 

handleNotes(e) { 
    const text = this.notes.value 
    console.log(text); 
} 

render() { 
return(
    <form className="form"> 
    <h4>Add a Memory</h4><br></br> 
    <p className="add-info">Keep track of all the fun and amazing places you 
    have been.</p> 
    <input type="text" name="place" placeholder="place" ref={input => 
    this.place = input}></input><br></br> 
    <input placeholder="time" ref={input => this.date = input}></input><br> 
    </br> 
    <input className="notes" placeholder="notes" ref={input => this.notes = 
    input}></input><br></br> 
    <button className="save" type="button" onClick= 
    {this.handleSave}>Save</button> 
    </form> 
); 
} 
handleSave() { 
    console.log(this.handlePlace) 
    console.log(this.handleDate) 
    console.log(this.handleNotes) 
} 
} 

Answer 1

Während es möglich ist, Refs zu verwenden, ist es nicht zu empfehlen, das Dom tatsächlich zu berühren, außer es ist notwendig. Ich denke es wäre hilfreich darüber nachzudenken, den 'reaktionsweg'.

In React steuert der Status Ihrer Anwendung die Ansicht, einschließlich der Eingaben. Was Sie also tun sollten, ist, dass der Status die Werte Ihrer Eingaben auffüllt und dann den Status aktualisiert, um zu ändern, was in diesen Eingaben enthalten ist. Etwas wie folgt aus:

export default class AddForm extends React.Component { 
    constructor(props) { 
    super(props); 
    //change here 
    this.handlePlace = this.handlePlace.bind(this); 
    this.handleDate = this.handleDate.bind(this); 
    this.handleNotes = this.handleNotes.bind(this); 
    this.handleSave = this.handleSave.bind(this); 
    this.state = { 
    placeText: '', 
    timeText: '', 
    noteText: '', 
    }; 
} 
// all changed 
handlePlace(e) { 
    this.setState({ placeText: e.target.value }); 
} 

handleDate(e) { 
    this.setState({ dateText: e.target.value }); 
} 

handleNotes(e) { 
    this.setState({ notesText: e.target.value}); 
} 

render() { 
return(
    <form className="form"> 
    <h4>Add a Memory</h4><br></br> 
    <p className="add-info">Keep track of all the fun and amazing places you 
    have been.</p> 
    // change here 
    <input type="text" name="place" placeholder="place" value={this.state.placeText} onChange={(e) => this.handlePlace(e)}></input><br></br> 
    // change here. e is implicitly passed to the onChange handler 
    <input type="text" placeholder="time" value={this.state.dateText} onChange={this.handleDate}></input><br> 
    </br> 
    //change here 
    <input className="notes" placeholder="notes" value={this.state.notesText} onChange={this.handleNotes}></input><br></br> 
    <button className="save" type="button" onClick= 
    {this.handleSave}>Save</button> 
    </form> 
); 
} 
handleSave() { 
    console.log(this.state.placeText) 
    console.log(this.state.dateText) 
    console.log(this.state.notesText) 
} 
} 

Es scheint langweilig, aber das deklarative Stil zahlt sich auf lange Sicht aus, wenn Sie die Jagd nach Bugs. Es wird einfacher, den Fluss Ihrer Daten durch Ihre Anwendung zu verfolgen.