TypeError：event.preventDefault 不是函数

Posted 2023-05-08

【中文标题】TypeError：event.preventDefault 不是函数

【英文标题】：TypeError: event.preventDefault is not a function

【发布时间】：2021-07-27 00:23:06

【问题描述】：

我正在学习教程并复制了所有内容，但出现此错误 TypeError: event.preventDefault is not a function 在 onSubmit() 但 event.preventDefault 在 onChange() 中起作用

这是我的代码：

import React,  Component  from 'react'
import '../App.css';
import ipfs from './ipfs';

class Add extends Component 
  constructor(props) 
    super(props);

    this.state = 
      ipfsHash: '',
      buffer: null,
    ;

    this.captureFile = this.captureFile.bind(this);
    this.onSubmit = this.onSubmit(this);
  

  captureFile(event) 
    event.preventDefault();
    const file = event.target.files[0];
    const reader = new window.FileReader();
    reader.readAsArrayBuffer(file);
    reader.onloadend = () => 
      this.setState( buffer: Buffer(reader.result) );
      console.log('buffer', this.state.buffer);
    ;
  

  onSubmit(event) 
    event.preventDefault();
    ipfs.files.add(this.state.buffer, (error, result) => 
      if (error) 
        console.error(error);
        return;
      
      this.setState( ipfsHash: result[0].hash );
      console.log('ipfsHash', this.state.ipfsHash);
    );
  

  render() 
    return (
      <div>
        <h1>Add a Graduate</h1>
        <form onSubmit=this.onSubmit>
          <input type='file' onChange=this.captureFile />
          <input type='submit' />
        </form>
        <h1>Transcript of Record</h1>
        <img src='https://ipfs.io/ipfs$this.state.ipfsHash' alt=''></img>
      </div>
    );
  


export default Add;

我不明白错误是什么。

【问题讨论】：

这是整个代码，我的意思是捕获文件上的 eventDefault 不会抛出 TypeError 而 onSubmit 中的 eventDefault 会。我想了解另一个抛出错误而另一个没有抛出错误的区别。

【参考方案1】：

在构造函数中调用 onSubmit 方法而不是绑定this： 让我们改变this.onSubmit = this.onSubmit(this); 到：

this.onSubmit = this.onSubmit.bind(this);

【讨论】：

为什么会导致TypeError: event.preventDefault is not a function？ this 应该稍后导致错误，但event

不会

这是因为您将this 作为event 传递，所以this 没有 preventDefault 方法。

我没有传递任何东西。据我所知，this 没有作为第一个参数隐式传递，它仍在传递事件。 this 的值将是undefined，因为当方法引用设置为处理程序React: “this” is undefined inside a component function 时它会丢失。因此，使用this 时会出现错误。但是event.preventDefault() 发生得更早。它表明event 被传递为undefined。