类型错误:event.preventDefault 不是函数

问题描述

我正在学习教程并复制了所有内容,但出现此错误 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;

我不明白错误是什么。

解决方法

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

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