Form Submit using reactjs

Question

I am new in reactjs. I am creating a sample project using reactjs. First I am getting error like state is null. After setting intial state i am getting error

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

I know there are many question related to this but my problem is not solved please help.

Here is 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

Please read more about the fundamentals of React and handling state in forms in the React documentation. No mixins or anything complicated 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 just like the error message says... There are many ways you could accomplish this but below is a basic example. Check out the snippet below in a 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 2

Solution

You cannot use valueLink anymore, instead use onChange react event to listen for input change, 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}
      />
    );
  }

Clarification

Notice that since the value is set from a state, it will only get updated from changing the attached state, writing in the input does nothing, unless you listen for the input changed (via onChange event) and update the state accordingly.

source: from React documentation