How to get form data from input fields in React

Question

Constructor and function:

constructor(props) { super(props); this.state = { tagline: 'We rank what people are talking about.', year: new Date().getFullYear() }; this.onFormSubmit = this.onFormSubmit.bind(this); } onFormSubmit(e) { console.log('onFormSubmit', e) console.log('this.state', this.state); }; 

Form (class names removed for clarity):

 <form onSubmit={ this.onFormSubmit }> <div className="fl w100"> <div> <input type="text" id="email" value={ this.state.email }/> <label htmlFor="email">Email</label> </div> </div> <div className="fl w100"> <div> <input type="password" id="password" value={ this.state.password }/> <label htmlFor="password">Password</label> </div> </div> <button type="submit"> Login </button> </form> 

This is what will exit the system, do not notice any information by email or password:

Full login component code

---

 import React from 'react'; class Login extends React.Component { constructor(props) { super(props); this.state = { tagline: 'We rank what people are talking about.', year: new Date().getFullYear() }; this.onFormSubmit = this.onFormSubmit.bind(this); } onFormSubmit(e) { console.log('onFormSubmit', e) console.log('this.state', this.state); }; render() { return (<div className="app"> <div className="welcome"> <header> <div className="wikitags-logo"> <img src="imgs/wikitags-logo.png"/> </div> <h2>Admin Portal</h2> <p>{ this.state.tagline }</p> </header> <section className="login-form"> <form onSubmit={ this.onFormSubmit }> <div className="fl w100"> <div className="mdl-textfield mdl-js-textfield"> <input className="mdl-textfield__input" type="text" id="email" value={ this.state.email }/> <label className="mdl-textfield__label" htmlFor="email">Email</label> </div> </div> <div className="fl w100"> <div className="mdl-textfield mdl-js-textfield"> <input className="mdl-textfield__input" type="password" id="password" value={ this.state.password }/> <label className="mdl-textfield__label" htmlFor="password">Password</label> </div> </div> <button type="submit" className="mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect mdl-button--accent"> Login </button> </form> </section> <footer> &copy; { this.state.year } WikiTags </footer> </div> </div>); } } export default Login; 

Answer 1

Suggestions:

1 .. You use the value property with input fields, but you did not define the onChange method, so your input fields will be read-only , because the status value will not be updated.

2. You need to define the onChange event so that all input fields or make them an uncontrollable element by removing the value property.

3 .. For an uncontrolled element, define ref for each field and use this.ref_name.value to access the value.

Having defined the onChange event:

Define a name property for each input element (the name should be the same as the name of the state variable, it will help to update the state, and we can process all changes in a single onChange function) as follows:

 <input type="text" name='value' value={this.state.value} onChange={(e) => this.handleChange(e)} /> handleChange(e){ this.setState({[e.target.name]: e.target.value}) } 

Using the Uncotrolled Element:

 <input type="text" ref={el => this.el = el} /> 

Now inside the onSubmit function, use this.el.value to access the values ​​of this input field.

Check this answer for reference: fooobar.com/questions/1267316 / ...

Answer 2

You do not receive information by email or password, because you are in console.log('this.state', this.state); state console.log('this.state', this.state); , and you did not set the status for email and password.

You now have two options:

• Set state and get form information from there
• Pass the input value to the function that processes the information

For parameter 1, you need to specify the state for your letter and password (although setting the state for the password is not recommended) and the onChange event onChange at the input (s).

Configure onChange event onChange .

 <form onSubmit={ this.onFormSubmit }> <input type="text" id="email" onChange={this.handleEmailChange} value={ this.state.email } /> <input type="password" id="password" onChange={this.handlePasswordChange} value={ this.state.password } /> <button type="submit"> Login </button> </form> 

And functions for setting email and password states.

 handleEmailChange(event) { this.setState({ email: event.target.value }); } handlePasswordChange(event) { this.setState({ password: event.target.value }); } 

And don't forget to initialize the state for email and password in the constructor and bind the functions.

 constructor(props) { super(props); this.state = { email: '', password: '' }; this.handleEmailChange = this.handleEmailChange.bind(this); this.handlePasswordChange = this.handlePasswordChange.bind(this); } 

And you're done! Then, in the onFormSubmit function onFormSubmit simply select the email and password values ​​from the state of this.state.email and this.state.password and do whatever you like.

Now for option 2 you can simply enter the event.target.value inputs, these are the values ​​for the email and password, and pass these values ​​to the onSubmit form event handler function, from there you can do whatever you want (set the state or update the email address and password, change them, whatever).

 <form onSubmit={ this.onFormSubmit }> <input type="text" id="email" name="theEmail" /> <input type="password" id="password" name="thePassword" /> <button type="submit"> Login </button> </form> 

And the onFormSubmit function.

 onFormSubmit(event) { const email = event.target.theEmail.value; const password = event.target.thePassword.value; // do stuff console.log('Email:', email); console.log('Password:', password); }; 

An easier and more recommended way to accomplish what you are trying to do is option 2.

Remember, the less your application processes, the better.

Answer 3

So, how I would like to do this is to keep the values ​​in your state using the so-called managed component. Creating a managed component is very simple, this is a basic implementation:

 class NameForm extends React.Component { constructor(props) { super(props); this.state = {value: ''}; this.handleChange = this.handleChange.bind(this); this.handleSubmit = this.handleSubmit.bind(this); } handleChange(event) { this.setState({value: event.target.value}); } handleSubmit(event) { alert('A name was submitted: ' + this.state.value); event.preventDefault(); } render() { return ( <form onSubmit={this.handleSubmit}> <label> Name: <input type="text" value={this.state.value} onChange={this.handleChange} /> </label> <input type="submit" value="Submit" /> </form> ); } } 

The key here is the handleChange function and the onChange attribute. Each time the input field changes, the handleChange function handleChange called and the state will be updated.

You can find more information here: https://facebook.imtqy.com/react/docs/forms.html