如何解决event.preventdefault创建按钮时的解析错误

Question

我是新手反应和努力创建登录按钮的新手。我会收到以下错误： ./src/form.js 第22行：解析错误：意外令牌

20 | }; 21 |

22 | event.preventdefault; | ^ 23 | 24 |使成为（） { 25 |返回（

我的代码：

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;

预先感谢！

Answer 1

首先，destressdefault是一个函数，因此您应该在最后添加（）。然后，如果您可以注意到，则在HandleLogInchange功能之外。

尝试以下操作：

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

Answer 2

将您的event.preventDefault（）放入要使用的函数中（请注意，您需要通过括号调用函数）。

还要注意使用Backticks `在使用String内部的JavaScript元素时，如果您选择使用基于字符串的实现。

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

一旦下课，一定会考虑将来使用钩子和功能组件（少数例外）。

Answer 3

因此，destextdefault（）是一个函数，您已将其放在代码中的每个函数之外。

然后登录是不正确的，使用onsubmit并连接一个函数以处理提交是正确的。

最后，您必须绑定事件处理程序以纠正上下文（这）。

做您想做的正确的方法是：

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;

如果解决方案有效，请作为正确的答案。

有用的资源：
https：//it.reaectjs.org/docs/handling-events.hhandling-events.html