Forms in React.js

Question

So I am attempting to build a comment form with a textarea input. The user submits their name, email, and leaves a comment which gets saved and sent to another component in an object format. However I am lost on how to build this actual object and target each individual aspect of the form. Here is my attempt:

 mySubmitHandler = event => {
   event.preventDefault();
   const message = {}
 this.props.addMessage(message)
  }

  render() {
  return (
    <footer >
          <form onSubmit={this.mySubmitHandler}>
          <h1>Your name</h1>
          <input type="text" name="name" onChange={this.nameHandler} />
          <h1>Your email</h1>
          <input type="text" name="email" onChange={this.emailHandler} />
          <h1>Your message</h1>
          <textarea onChange={this.contentHandler} />
          <br />
          <input type="submit" />
        </form>
    </footer>
    )
  };
};

Where's your nameHandler, emailHandler?

Eric E
– Eric E

2019-07-30 04:19:33 +00:00
Commented Jul 30, 2019 at 4:19 — Eric E
– Eric E, Commented Jul 30, 2019 at 4:19

xun · Accepted Answer · 2019-07-30 04:07:53Z

you can use the attribute ref for the input and textarea fields.

  mySubmitHandler = event => {
    event.preventDefault();

    /* you can access the value as below */
    const inputName = this.refInputName;
    const inputEmail = this.refInputEmail;
    const inputMessage = this.refInputMessage;

    const message = {}
    this.props.addMessage(message)
  }

  render() {
    return (
        <footer>
          <form onSubmit={this.mySubmitHandler}>
            <h1>Your name</h1>
            <input
              type="text"
              name="name"
              ref={(node) => (this.refInputName = node)} // <-- ref
            />
            <h1>Your email</h1>
            <input
              type="text"
              name="email"
              ref={(node) => (this.refInputEmail = node)} // <-- ref
            />
            <h1>Your message</h1>
            <textarea ref={(node) => (this.refInputMessage = node)} /> // <-- ref
            <br />
            <input type="submit" />
          </form>
        </footer>
      )
  };
};

Harsh Makadia · Accepted Answer · 2019-07-30 04:10:19Z

Below is the code snippet. Also in your code you have written mutiple change handler for each field, However you can get it down using single change handler like the one done in my code.

class App extends React.Component {
  constructor() {
    super()
    this.state = {
      name: '',
      email: '',
      message: '',
    }
  }

  changeHandle = (event) => {
    this.setState({
      [event.target.name]: event.target.value
    });
  }

  mySubmitHandler = (event) => {
    event.preventDefault();
    //pass the value ahead to new component from here
    console.log(this.state);
  }


  render() {
    return ( <
      div className = "container" >
      <
      form onSubmit = {
        this.mySubmitHandler
      } >
      <
      h1 > Your name < /h1> <
      input type = "text"
      name = "name"
      onChange = {
        this.changeHandle
      }
      /> <
      h1 > Your email < /h1> <
      input type = "text"
      name = "email"
      onChange = {
        this.changeHandle
      }
      /> <
      h1 > Your message < /h1> <
      textarea name = "message"
      onChange = {
        this.changeHandle
      }
      /> <
      br / >
      <
      input type = "submit" / >
      <
      /form> <
      /div>
    );
  }
}

ReactDOM.render( < App / > , document.getElementById("root"));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<div id="root"></div>

Welcome, Tom! You can verify the answer if it works well for you. So if some is facing a problem similar to you can find this solution helpful.

SiddAjmera · Accepted Answer · 2019-07-30 04:16:22Z

Just in case you might want to implement it as a Function Component:

import React, { useState } from "react";
import ReactDOM from "react-dom";

import "./styles.css";

function App() {
  const [state, setState] = useState({
    name: "",
    email: "",
    message: ""
  });

  const mySubmitHandler = event => {
    event.preventDefault();
    console.log(state);
    this.props.addMessage(state);
  };

  const nameHandler = event => {
    setState({
      ...state,
      name: event.target.value,
    });
  };

  const emailHandler = event => {
    setState({
      ...state,
      email: event.target.value,
    });
  };

  const contentHandler = event => {
    setState({
      ...state,
      message: event.target.value,
    });
  };

  return (
    <footer>
      <form onSubmit={mySubmitHandler}>
        <h1>Your name</h1>
        <input type="text" name="name" onChange={nameHandler} />
        <h1>Your email</h1>
        <input type="text" name="email" onChange={emailHandler} />
        <h1>Your message</h1>
        <textarea onChange={contentHandler} />
        <br />
        <input type="submit" />
      </form>
    </footer>
  );
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

Here's a Sample CodeSandbox for your ref.

Collectives™ on Stack Overflow

Forms in React.js

3 Answers 3

Comments

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related