Form Submit using reactjs Form Submit using reactjs reactjs reactjs

Form Submit using reactjs


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>    )  }});


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


You should set your state to atleast empty initially, if you want to access it at a later point of time. Something similar to below will do

getInitialState() { return {};},