当我单击Upload按钮而不输入时country code，file它会发出警报please enter the code and choose the file。但是一旦我选择了这些栏位，然后单击Upload此按钮method does not get called。我也尝试检查使用console.log。

 handleSubmit() {
    if (!this.state.selectedFile) {
      alert('Please select The file');
      return false;
    }
    if (!this.state.countryCode) {
      alert('Please select The Country Code');
      return false;
    }
    const data = new FormData();

    for (let i = 0; i < this.state.selectedFile.length; i  ) {
      data.append('file[]', this.state.selectedFile[i]);
    }
    data.append('countryCode', this.state.countryCode);
    alert(data.file || data.countryCode);

    let url = process.env.API_URL;

    axios.post(url, data, {}).then(
      (res) => {
        this.setState({ responseArray: res.data });
        this.resetFile();
      },
      (error) => {
        alert(error);
      }
    );
  }

页面也会自动重绘 。我不确定是什么导致了错误。我尝试了很多，但无法弄清楚问题所在。请帮我。下面是完整的代码。

import React from 'react';
import axios from 'axios';

class FileUpload extends React.Component {
  constructor() {
    super();
    this.state = {
      selectedFile: '',
      countryCode: '',
      responseArray: [],
    };
    this.handleInputChange = this.handleInputChange.bind(this);
    this.handleInput = this.handleInput.bind(this);
  }

  handleInputChange(event) {
    this.setState({
      selectedFile: event.target.files[0],
      responseArray: [],
    });
  }

  handleInput(event) {
    this.setState({
      countryCode: event.target.value,
    });
  }

  handleSubmit() {
    if (!this.state.selectedFile) {
      alert('Please select The file');
      return false;
    }
    if (!this.state.countryCode) {
      alert('Please select The Country Code');
      return false;
    }
    const data = new FormData();

    for (let i = 0; i < this.state.selectedFile.length; i  ) {
      data.append('file[]', this.state.selectedFile[i]);
    }
    data.append('countryCode', this.state.countryCode);
    alert(data.file || data.countryCode);

    let url = process.env.API_URL;

    axios.post(url, data, {}).then(
      (res) => {
        this.setState({ responseArray: res.data });
        this.resetFile();
      },
      (error) => {
        alert(error);
      }
    );
  }

  resetFile() {
    document.getElementsByName('file')[0].value = null;
  }

  render() {
    return (
      <form>
        <div className="row">
          <div className="col-md-12">
            <h1>Translation File Upload</h1>

            <div className="form-row">
              <div className="form-group col-md-8">
                <label>Please enter the country code</label>
                <input
                  type="text"
                  value={this.state.countryCode}
                  onChange={this.handleInput}
                  required
                />
              </div>
            </div>

            <div className="form-row">
              <div className="form-group col-md-8">
                <label>Select File :</label>
                <input
                  type="file"
                  className="form-control"
                  multiple
                  name="file"
                  onChange={this.handleInputChange}
                  required
                />
              </div>
            </div>
            <br />
            <div className="form-row">
              <div className="col-md-6">
                <button onClick={this.handleSubmit.bind(this)}>Upload </button>
              </div>
            </div>
            <br />
          </div>
        </div>
      </form>
    );
  }
}

export default FileUpload

;

uj5u.com热心网友回复：

您必须防止表单的 onSubmit 处理程序的默认行为。修改提交函式的开头，如下所示：

handleSubmit(e) {
   e.preventDefault()
(...)

对于表单提交处理程序，它会阻止提交表单。

uj5u.com热心网友回复：

关于重绘 问题。我相信这是formand the的预期行为，submit button,您所需要的就是防止这种行为。

关于第二个问题，我认为这是一个后端问题。尝试禁用 Axios 并检查您是否仍有相同的问题

uj5u.com热心网友回复：

首先表单的默认方法是重绘 页面，正如其他人所说，您需要呼叫

  e.preventDefault() in your handle submit function

其次，永远不要直接访问“DOM”，REACT 管理 DOM，所以如果你直接弄乱它，react 不会知道，最终会造成很多混乱。

而不是像这里一样直接设定值

document.getElementsByName('file')[0].value = null;

使其成为受控形式并将档案的值保持在状态并将其重置为 null 并将其传递给输入栏位。当您重置档案时，您不会更新您的状态属性，selectedFile 和 countryCode 栏位此时不为空，并且它不会提醒您，因为您已通过 DOM 直接重置档案而没有 React，但您正在检查来自反应状态值的警报。