Ad

React - This._onSubmit Not Working

- 1 answer

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?

Ad

Answer

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')
);
Ad
source: stackoverflow.com
Ad