Extract data from multiple inputs in form react

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

Stephen L · Accepted Answer · 2017-05-24 19:42:58Z

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.

edited May 24, 2017 at 19:42

answered May 24, 2017 at 4:14

Stephen L

2,35913 silver badges17 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

JontheNerd Over a year ago

Hey thanks! I tried to run that to log out the new inputs and I got this: Cannot read property 'handlePlace' of null.

Stephen L Over a year ago

Did you bind this to handleplace in the constructor??

JontheNerd Over a year ago

I did. It is set up just like you provided.

Stephen L Over a year ago

I forgot a line of code. See this.handleSave = this.handleSave.bind(this). Whenever you want to access this inside of a method, you have to bind this to the method in the constructor.

Collectives™ on Stack Overflow

Extract data from multiple inputs in form react

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related