How to solve parsing error for event.preventDefault when creating a button-CodePudding

I am new to React and struggling to create a login button. I get the following error: ./src/Form.js Line 22: Parsing error: Unexpected token

20 | }; 21 |

22 | event.preventDefault; | ^ 23 | 24 | render() { 25 | return (

My code:

import React, { Component } from 'react';
import classes from './Form.module.css';

class Form extends Component {
  constructor(props) {
    super(props);
    this.state = {
      username: ''
    };
  }

  handleUsernameChange = (event) => {
    this.setState({
      username: event.target.value
    });
  };

  handleLoginChange = (event) => {
    alert('${this.state.username} ');
      };
      
      event.preventDefault;

  render() {
    return (
      <form className={classes.Form} on Login = {this.handleLogin}>
      
        <label>Username</label>
        <input
          type="text"
          value={this.state.username}
          onChange={this.handleUsernameChange}
        ></input>
        <button type="login">Login</button>
      
      </form>
    );
  }
}

export default Form;

Thanks in advance!

CodePudding user response：

First of all, preventDefault is a function, so you should add () at the end. Then if you can notice, is outside the handleLoginChange function.

Try this:

handleLoginChange = (event) => {
    event.preventDefault();
    alert('${this.state.username} ');
      };

CodePudding user response：

Place your event.preventDefault() inside the function you want to use it for (notice that you need to call the function through parenthesis).

Also note to use backticks ` when using javascript elements inside of a string should you choose to use a string-based implementation.

handleLoginChange = (event) => {
     event.preventDefault()
     alert(`${this.state.username}`)
     }

Once you get classes down, definitely look into using hooks and functional components in the future (with a few exceptions).

CodePudding user response：

So, preventDefault() is a function and you had placed it outside of every function in your code.

Then On Login is not correct, it would be correct to use onSubmit and connect a function to handle the submit.

In the end, you have to bind your event handlers to correct context (this).

The correct way to do what you want is this:

import React, { Component } from "react";

class Form extends Component {
  constructor(props) {
    super(props);
    this.state = {
      username: ""
    };
  }

  handleUsernameChange = (event) => {
    this.setState({
      username: event.target.value
    });
  };

  handleSubmit = (event) => {
    event.preventDefault();
    alert(`${this.state.username}`);
  }

  render() {
    return (
      <form onSubmit={this.handleSubmit.bind(this)}>
        <label>Username</label>
        <input
          type="text"
          value={this.state.username}
          onChange={this.handleUsernameChange.bind(this)}
        ></input>
        <button type="submit">Login</button>
      </form>
    );
  }
}

export default Form;

If the solution works, tick as the correct answer, the other answers so far have not been complete.

useful resources: https://it.reactjs.org/docs/handling-events.html