显示错误以上传文件或禁用 de 按钮

Question

我有这个 React 代码，您也可以在此处查看代码https://stackblitz.com/edit/react-excel-to-json-parser。当我在没有上传文件的情况下单击“处理触发器”按钮时。该应用程序打破了如何处理用户必须上传文件或禁用按钮“处理触发器”直到用户上传文件的警报错误。import React, { Component } from 'react';import { Fabric } from 'office-ui-fabric-react/lib/Fabric';import { DefaultButton } from 'office-ui-fabric-react/lib/Button';import XLSX from 'xlsx';import { make_cols } from './MakeColumns';import { SheetJSFT } from './types'; class ExcelReader extends Component {  constructor(props) {    super(props);    this.state = {      file: {},      data: [],      cols: []    }    this.handleFile = this.handleFile.bind(this);    this.handleChange = this.handleChange.bind(this);  }   handleChange(e) {    const files = e.target.files;    if (files && files[0]) this.setState({ file: files[0] });  };   handleFile() {    /* Boilerplate to set up FileReader */    const reader = new FileReader();    const rABS = !!reader.readAsBinaryString;     reader.onload = (e) => {      /* Parse data */      const bstr = e.target.result;      const wb = XLSX.read(bstr, { type: rABS ? 'binary' : 'array', bookVBA : true });      /* Get first worksheet */      const wsname = wb.SheetNames[0];      const ws = wb.Sheets[wsname];      /* Convert array of arrays */      const data = XLSX.utils.sheet_to_json(ws);      /* Update state */      this.setState({ data: data, cols: make_cols(ws['!ref']) }, () => {        console.log(JSON.stringify(this.state.data, null, 2));      });     };     if (rABS) {      reader.readAsBinaryString(this.state.file);    } else {      reader.readAsArrayBuffer(this.state.file);    };  } 

Answer 1

将 handleFile() 代码放在 try catch 块中

handleFile() {

    try {

        /* Boilerplate to set up FileReader */

        const reader = new FileReader();

        const rABS = !!reader.readAsBinaryString;

    

        reader.onload = (e) => {

          /* Parse data */

          const bstr = e.target.result;

          const wb = XLSX.read(bstr, { type: rABS ? 'binary' : 'array', bookVBA : true });

          /* Get first worksheet */

          const wsname = wb.SheetNames[0];

          const ws = wb.Sheets[wsname];

          /* Convert array of arrays */

          const data = XLSX.utils.sheet_to_json(ws);

          /* Update state */

          this.setState({ data: data, cols: make_cols(ws['!ref']) }, () => {

            console.log(JSON.stringify(this.state.data, null, 2));

          });

    

        };

    

        if (rABS) {

          reader.readAsBinaryString(this.state.file);

        } else {

          reader.readAsArrayBuffer(this.state.file);

        };

    } catch(err) {

      console.log(err);

    }

  }

Answer 2

您可以disabled根据本地状态将属性添加到提交按钮。

您的新本地状态将是：

this.state = {

  file: {},

  isFileLoaded: false,

  data: [],

  cols: []

}

然后更新你的状态handleChange：

handleChange(e) {

  const files = e.target.files;

  if (files && files[0]) this.setState({ file: files[0], isFileLoaded: true });

};

最后是您的提交输入：

<input type='submit' disabled={!this.state.isFileLoaded} value="Process Triggers" onClick={this.handleFile} />

这是一个工作演示：https ://stackblitz.com/edit/react-excel-to-json-parser-g49uhh

Answer 3

您是否要始终显示错误（未上传文件时）？要禁用提交按钮，您可以尝试

<input type='submit' 

   disabled={!this.state.file}

   value="Process Triggers"

   onClick={this.handleFile}

/>