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 {};},