简体   繁体   中英

Getting input value for email in react when input value change or updated

I am trying to get value from the input email field and then populate on HTML, but I couldn't get value from the email field, which is React class component.

App.js

import React, { Component } from "react";
import "./styles.css";

class App extends Component {
  constructor() {
    super();
    this.state = {
      firstName: "",
      emailAddress: ""
    };
    this.handleChange = this.handleChange.bind(this);
  }

  handleChange(event) {
    const { name, value  } = event.target;
    this.setState({
      [name]: value,
    });
  }

  render() {
    return (

      <div>
      <form>
        <label for="firstName">First Name</label>
        <input
          type="text"
          name="firstName"
          placeholder="First Name"
          value={this.state.firstName}
          onChange={this.handleChange}
        />

        <label for="emailAddress">Email</label>
        <input
          type="email"
          name="emailAddress"
          placeholder="Email Address"
          value={this.state.emailAddress}
          onChange={this.handleChange}
        />
      </form>


<p>Name: {this.state.firstName}</p>
<p>Email:{this.state.emailAddress}</p>

      </div>
    );
  }
}

export default App;

Name input work entirely, but the email field does not take the value, and so the output is!

index.js

import React from "react";
import ReactDOM from "react-dom";

import App from "./App";

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

onchange should onChange (camel case)

For email input, replace

onchange={this.handleChange}

with

onChange={this.handleChange}

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM