Question

正如标题所述，我在React中将一个表单和一个图像上传元素放在一起。我在文件输入上有一个onChange处理程序，以便在用户提交表单的其余部分之前验证并上传文件。上传机制是对我在Express中设置的REST API的提取请求。尽管我在事件上调用了preventDefault（），但是当我选择要上传的文件时，页面仍会重新加载。似乎是fetch请求引起了问题（运行带有注释的请求的表单似乎停止了重新加载），但是我不知道为什么。

任何想法都将不胜感激！！谢谢！

这是表格的简单版本：

import React, { Component } from 'react';

class FormTest extends Component {
  constructor(props) {
    super(props);
    this.onImageChosen = this.onImageChosen.bind(this);
    this.onSubmit = this.onSubmit.bind(this);
  }

  onImageChosen = (e) => {
    e.preventDefault();
    e.stopPropagation();
    const data = new FormData();
    data.append('file', e.target.files[0]);
    fetch('http://localhost:3005/api/addimage', {
      method: 'POST',
      body: data,
    })
      .then(res => res.json())
      .then((res) => {
        console.log(res);
      })
      .catch((err) => {
        console.error(err);
      });
  };

  onSubmit = (e) => {
    e.preventDefault();
    e.stopPropagation();
  }

  render() {
    return (
      <form className="form-group" onSubmit={this.onSubmit}>
        <input
          type="file"
          accept="image/*"
          onChange={this.onImageChosen}
          value=""
          multiple
        />
      </form>
    );
  }
}

export default FormTest;

尽管有preventdefault（），但仍在文件选择时重新加载页面

0 个答案: