CODEWITHSUNDEEP
reactjs
JontheNerd
JontheNerd

Reputation: 83

Extract data from multiple inputs in form react

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)
 }
}

Upvotes: 1

Views: 1982

Answers (1)

Stephen L
Stephen L

Reputation: 2339

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.

Upvotes: 1

Related Questions