創建按鈕時如何解決event.preventDefault的決議錯誤-有解無憂

我是 React 新手，正在努力創建登錄按鈕。我收到以下錯誤：./src/Form.js Line 22: Parsing error: Unexpected token

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;

提前致謝！

uj5u.com熱心網友回復：

首先，preventDefault是一個函式，所以你應該()在最后添加。然后如果你能注意到，是在handleLoginChange 函式之外。

嘗試這個：

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

uj5u.com熱心網友回復：

將 event.preventDefault() 放在要使用它的函式中（注意，您需要通過括號呼叫該函式）。

如果您選擇使用基于字串的實作，請注意在字串中使用 javascript 元素時使用反引號` 。

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

一旦你搞定了類，一定要考慮在未來使用鉤子和功能組件（有一些例外）。

uj5u.com熱心網友回復：

所以，preventDefault()是一個函式，你把它放在代碼中的每個函式之外。

然后On Login是不正確的，使用onSubmit并連接一個函式來處理提交是正確的。

最后，您必須將事件處理程式系結到正確的背景關系（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;

如果解決方案有效，請勾選正確答案，到目前為止其他答案尚未完成。

有用的資源： https ://it.reactjs.org/docs/handling-events.html

轉載請註明出處，本文鏈接：https://www.uj5u.com/houduan/495406.html

標籤：反应形式事件处理

上一篇：Docker(1)

下一篇：在組件中添加文本區域的值