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.