CODEWITHSUNDEEP
node.jsexpressreactjs
Eric B.
Eric B.

Reputation: 4702

React - this._onSubmit not working

I am making a simple web app, using node, express and react. My routes are working fine and i am able to render my views, but the "events" in my views are not working.

The following view gets rendered but its events don't work. 

var React = require('react');
var DefaultLayout = require('./layout/master');
var GeneralHtml = require('./generalhtml');
var ReactDOM = require('react-dom')

var SignupComponent = React.createClass({
getInitialState: function(){
  console.log('getInitialState');
  return {}
    },    
_onSubmit: function (e){
  console.log('hello _onSubmit');
  },
_onChange: function(){
  console.log('hello _onChange');
  },
  render: function(){  
      return(
         <DefaultLayout name={this.props.name}>
        <form ref='sugnup_form' onSubmit={this._onSubmit}>
            <div className="col-md-5">
          <p className="h3">Signup Form</p>
          <GeneralHtml placeholder="Enter Your Name" name="user_name" onChange={this._onChange}>User Name</GeneralHtml>
          <GeneralHtml placeholder="Enter Your Email" onChange={this._onChange} name="email">Email</GeneralHtml>
          <GeneralHtml placeholder="Enter Your Password" name="password">password</GeneralHtml>
          <input className="btn btn-success" type="submit" value="Submit" onSubmit={this._onSubmit} />
          </div>
        </form>
           </DefaultLayout>
    )
  }
});

module.exports = SignupComponent;

The _onSubmit and _onChange events never get called. However, getInitialState is called.

What am i doing wrong here?

Upvotes: 0

Views: 95

Answers (2)

nanobar
nanobar

Reputation: 66425

You won't get answers to this because your code works fine (I just removed the custom elements):

https://jsfiddle.net/ferahl/4x34ae37/

var SignupComponent = React.createClass({
getInitialState: function(){
  console.log('getInitialState');
  return {}
    },    
_onSubmit: function (e){
  console.log('hello _onSubmit');
  },
_onChange: function(){
  console.log('hello _onChange');
  },
  render: function(){  
      return(
        <form ref='sugnup_form' onSubmit={this._onSubmit}>
            <div className="col-md-5">
              <p className="h3">Signup Form</p>
              <input placeholder="Enter Your Name" name="user_name" onChange={this._onChange}/>
              <input placeholder="Enter Your Email" onChange={this._onChange} name="email"/>
              <input placeholder="Enter Your Password" name="password"/>
              <input className="btn btn-success" type="submit" value="Submit" />
            </div>
        </form>
    )
  }
});


ReactDOM.render(
  <SignupComponent />,
    document.getElementById('container')
);

Upvotes: 1

Henrik Andersson
Henrik Andersson

Reputation: 47212

getInitialState must return an object otherwise it throws an error, which most likely is the reason your code isn't working. Furthermore the input field does not have an onSubmit event attached to it so

won't work. Change it to onClick and it'll work.

Upvotes: 0

Related Questions