Extract data from multiple inputs in form react - reactjs

Question

So I am still relatively new to React. I want to get data from three form inputs (and eventually post that to database). I have been using the internet to help, but I figured would try my luck here. Right here I am trying to just log out what the user texts in the inputs.
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

While it is possible to use refs to do this, it is not recommended to actually touch the dom unless it is necessary. I think it would be helpful
to think about this the 'react way'.
In React, the state of your application drives the view, including inputs. So what you 'should' be doing is letting the state populate the values of your inputs and then update the state to change what is in those inputs. Something like this:
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)
}
}
It seems tedious, but this declarative style really pays off in the long run when you're hunting down bugs. It becomes easier to follow the flow of your data through your application.