Submit form

Question

I am new to reaction. I am creating a sample project using responsejs. First I get an error as the state is null. After setting the internal state, I get an error

I got Warning: valueLink prop on input is deprecated; set value and onChange instead 

I know that there are many questions related to this, but my problem is not resolved, please help.

Here is the code:

 import React, {Component} from 'react'; import {Link} from 'react-router' import validator from 'validator'; import LinkedStateMixin from 'react-addons-linked-state-mixin'; module.exports = React.createClass({ mixins: [LinkedStateMixin], getInitialState() { return {}; }, saveData: function(){ //console.log(this.state) }, render () { return ( <form> <div className="page-content container"> <div className="row"> <div className="col-md-4 col-md-offset-4"> <div className="login-wrapper"> <div className="box"> <div className="content-wrap"> <h6>Sign Up</h6> <input className="form-control" name ="email" placeholder="E-mail address" type="text" valueLink={this.linkState('email')}/> <input className="form-control" name="password" placeholder="Password" type="password"/> <input className="form-control" placeholder="Confirm Password" type="password" /> <div className="action"> <button type="button" className ="btn btn-primary signup" onClick={this.saveData}>Sign Up</button> </div> </div> </div> <div className="already"> <p>Have an account already?</p> <Link to ="/reactApp/">Login</Link> </div> </div> </div> </div> </div> </form> ) } }); 

Answer 1

Decision

You can no longer use valueLink , instead use onChange respond to the event to listen for input changes, and value to set the changed value.

 class MyForm extends React.Component { constructor(props) { super(props); this.state = {value: 'Hello!'}; this.handleChange = this.handleChange.bind(this); } handleChange(event) { this.setState({value: event.target.value}); } render() { return ( <input type="text" value={this.state.value} onChange={this.handleChange} /> ); } 

Explanation

Please note that since the value is set from the state, it will be updated only from a change in the nested state, the input entry does nothing if you do not listen to the input change (through the onChange event) and update the state accordingly.

source: from troubleshooting documentation

Answer 2

Please read more about the basics of Response and processing status in forms in the React with documentation. No mixins or anything complicated is required. Also, as stated above, "ReactLink is deprecated as of React v15. The recommendation is to explicitly set the value and change handler, instead of using ReactLink."

Each of your text inputs should have a change handler, as the error message says ... There are many ways to accomplish this, but the basic example is below. See the snippet below on the fiddle here https://jsfiddle.net/09623oae/

 React.createClass({ getInitialState: function() { return({ email: "", password: "", passwordConfirmation: "" }) }, submitForm: function(e) { e.preventDefault() console.log(this.state) }, validateEmail: function(e) { this.setState({email: e.target.value}) }, validatePassword: function(e) { this.setState({password: e.target.value}) }, confirmPassword: function(e) { this.setState({passwordConfirmation: e.target.value}) }, render: function() { return ( <form onSubmit={this.submitForm}> <input type="text" value={this.state.email} onChange={this.validateEmail} placeholder="email" /> <input type="password" value={this.state.password} onChange={this.validatePassword} placeholder="password" /> <input type="password" value={this.state.passwordConfirmation} onChange={this.confirmPassword} placeholder="confirm" /> </form> ) } }); 

Answer 3

You must first set your state to at least empty if you want to access it at a later point in time. Something like below will be

 getInitialState() { return {}; }, 

Answer 4

ReactLink No ValueLink

You can change with

 <input type="text" value={valueLink.value} onChange={handleChange} /> 

Link:

https://facebook.imtqy.com/react/docs/two-way-binding-helpers.html

Answer 5

This warning occurs because React Link is deprecated in React 0.15 :

ReactLink has been deprecated since React v15. The recommendation is to explicitly set the value and change handler, instead of using ReactLink.

So, instead of using this.linkState('email') and valueLink :

 <input className="form-control" name ="email" placeholder="E-mail address" type="text" valueLink={this.linkState('email')}/> 

Use this.state.email and the onChange function:

 callThisWhenChangeEmail: function(emailFromInput) { this.setState({ email: emailFromInput }); }, render () { /* the existent code above */ <input className="form-control" name ="email" placeholder="E-mail address" type="text" value={this.state.email} onChange={this.callThisWhenChangeEmail}/> /* the existent code below */ } 

When the user enters some email at the entrance, the callThisWhenChangeEmail function is callThisWhenChangeEmail , receiving the email address as a parameter ( emailFromInput ). Thus, you only need to set this email in state.