React Function not firing?

help
1

Hello, folks. I’m a relatively new Meteor developer, and after learning Blaze, I decided to start learning React, because it seemed like the right thing to do, and I sort of liked the idea of how it worked.

Anyway, I’m having issues with a bit of code I’m working on, and could use some guidance… I’ve got the following segments of code:

For some reason, when the form in the component is submitted, it isn’t firing the function that’s meant to handle submission. Instead, it refreshes the page (as event.preventDefault() never happens).

What would be causing this to happen? As per suggested on IRC, I’ve tried replacing onSubmit={this.handleSubmit} with the following:

  • onSubmit={()=>{this.handleSubmit}}
  • onSubmit={this.handleSubmit()}

Neither of them had any effect, the form submission function still isn’t being called. I’m really confused, because I followed documentation for the most part, and it looks like it should be working.

As I’m really new to React, I’m sure I’m overlooking something, but have no idea what. Can anyone offer me some aid? Thanks in advance!

EDIT: It was suggested that I link a repository that has the project in a runnable state. This is the repository that the current code is living in: https://bitbucket.org/czbaker/karuto/

2

I would pare it down and then build it up once the basics are working. Put this into a page that can render and then checkout the debugger.

MyForm = React.createClass({
  handleSubmit(event) {
    debugger
    event.preventDefault();
    console.log('test');
  },

  render() {
    debugger
    return (
      <form onSubmit={this.handleSubmit}>
        <textarea rows="20" ref="proxy-cards"></textarea>
        <input type="submit" value='Submit' />
      </form>
    );
  }
});
1 Like
3

Yeah, like…I don’t know if it has something to do with it being a component that’s a child of others, but…yeah.

I’ll give that a shot in a little while and see what’s going on. Thanks for the quick reply and suggestion.

1 Like
4

Alternatively, if you want someone to look at your exact code, create a MeteorPad for it, and we’ll try our best to help!

1 Like
5

Can MeteorPad handle React/JSX?

6

That or even just upload a minimal repo on github (just the part you’re having an issue with) that’s runnable.

7

I have it in a repo right now on Bitbucket. I could make it public and link it after pushing this bit of code if that would be of assistance. It’s runnable as it is right now, just doesn’t do what it should be doing.

The code as it exists right now is located at the following repo:

https://bitbucket.org/czbaker/karuto

8

It’s your layout with FlowRouter, something is causing it to blow away the event handling. If you change the route to this, it works:

FlowRouter.route('/proxies', {
  name: 'proxies',
  action() {
    ReactLayout.render(ProxyPage);
  }
});     

ProxyForm = React.createClass({
  // mixins: [ReactMeteorData],

  handleSubmit(event) {
    event.preventDefault();
    console.log('test', this.refs['proxy-cards'].value);
  },

  render() {
    debugger
    return (
      <form className="proxy-form ui form" onSubmit={this.handleSubmit} >
        <div className="field">
          <textarea rows="20" ref="proxy-cards"></textarea>
        </div>
        <button className="ui button" type="submit">Submit</button>
      </form>
    );
  }
});

This is why replicating it down to the most simple case usually solves the bug for you, a lot of times it’s not the part that you expect :smile:

9

Yeah…it must have something to do with the ProxyForm component being a child of App and/or MainLayout, but I don’t know how to fix it, if that’s the case. Like, it needs to be that way, and I don’t know what’s keeping the events from firing at all. I definitely get what you’re saying, though…and what you wrote makes sense, I just don’t know how to solve the problem, I guess.

It must have to do with the fact that I’m passing a component as a prop to render (using as a sort of…layout, sorta like Blaze? I don’t know how to else to do what I’m doing, which is the fundamental problem.

You’re definitely right, though. If I render the ProxyForm by itself, it works perfectly. It has something to do with the layout stuff.

1 Like
10

I figured out what my problem was. I was trying to dynamically set the title for each page using state, and my top-level <App /> component was rendering the whole HTML tree, including <head>.

In doing so, I managed to break things. Got rid of that part of the top-level component, and all is well.

Thanks for the help, everyone.

1 Like