react-bootstrap onSubmit doesn’t bind correctly

Question

I’m trying to write an express app using express-react-views and react-bootstrap.

I haven’t gone about this the normal way of creating a react app (running npx create-react-app my-app), instead setting up an express app and running routing through that. This all seems to work, but right now I’m trying to create a bootstrap form with an onSubmit handler.

I’ve looked at the code examples on the react site for forms: https://reactjs.org/docs/forms.html, yet with the code below, my handleSubmit is never called. If I replace the code in onSubmit with something like a console.log(‘hello’), then i see the ‘hello’ pop up in my console when I load the page.

const React = require('react');
const Jumbotron = require('react-bootstrap').Jumbotron;
const Container = require('react-bootstrap').Container;
const Form = require('react-bootstrap').Form;
const FormGroup = require('react-bootstrap').FormGroup;
const Button = require('react-bootstrap').Button;
const AuthorisedLayout = require('./Layouts/loggedin');

class Generate extends React.Component {
  constructor(props) {
    super(props);
    this.state = {value: ''};
    this.handleChange = this.handleChange.bind(this);
    this.handleSubmit = this.handleSubmit.bind(this);
  }

  handleChange(event) {
    this.setState({value: event.target.value});
  }

  handleSubmit(event) {
    console.log('handleSubmit() clicked');      
    console.log(event);
    event.preventDefault();
  }

  render() {
    return (
      <AuthorisedLayout title={this.props.title}>
        <Jumbotron>
          <Container>
            <h1 className="display-3">{this.props.title}</h1>
            <p>{this.props.username}, this will generate a new key pair to be stored on the server.</p>
            <p>When the generation is complete, a zip file containing the key pair will download to your machine.</p>
          </Container>
        </Jumbotron>
        <Container>
          <Form onSubmit={this.handleSubmit}>
            <FormGroup controlId="service">
              <Form.Label>Service Name</Form.Label>
              <Form.Control type="text" placeholder="Service name" value={this.state.value} onChange={this.handleChange}></Form.Control>
            </FormGroup>
            <Button variant="primary" type="submit">
              Generate key pair
            </Button>
          </Form>
        </Container>
      </AuthorisedLayout>
    );
  }
}

module.exports = Generate;

I believe my express app is correctly setup to use jsx views:

const app = express();
app.set('Views', __dirname + '/Views');
app.set('view engine', 'jsx');
app.engine('jsx', require('express-react-views').createEngine());

So how can I get my onSubmit to work correctly, where it should output the various console.logs I have, and prevent the chain of events occurring?

Edit

I've created a codepen kind of thing here: codepen

** Edit 2** Just corretc the code to see better

Answer 1

Fundamental misunderstanding of what express-react-views does and doesn’t do.

express-react-views Acts as a JSX-based server side templater, which means it doesn’t provide event handlers for things like onSubmit or onChange making my:

  handleChange(event) {
    this.setState({value: event.target.value});
  }

  handleSubmit(event) {
    console.log('handleSubmit() clicked’);
    console.log(event);
    event.preventDefault();
  }

redundant.

There are supposedly ways to add this functionality, but the creator of express-react-views doesn’t document or encourage this, as it’s not a guaranteed method of adding event handlers.

Answer 2

Perhaps you need to add event.persist() before triggering handleSubmit function. For exxample:

onSubmit={(event) => {event.persist();this.handleSubmit(event)}}>

and in handleSubmit(event)

handleSubmit(event){
    // use event.currentTarget - It will be visible here
}