代碼在反應中產生了驚人的輸出。提交按鈕后未呼叫函式

當我單擊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，但您正在檢查來自反應狀態值的警報。

標籤：

上一篇：未定義命名引數“body”。在顫振代碼中

下一篇：將輸入欄位和檔案提交到服務器。（不作業）