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

Question

I have this React code, also you can check the code here https://stackblitz.com/edit/react-excel-to-json-parser . When I click the button 'Process Triggers' without upload a file. The app breaks how can handle an alert error the user must upload the file or disable the button 'Process Triggers' until the user upload a file.

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);
    };
  }
 
  render() {
    return (
      <div>
        <label htmlFor="file">Upload an excel to Process Triggers</label>
        <br />
        <input type="file" className="form-control" id="file" accept={SheetJSFT} onChange={this.handleChange} />
        <br />
        <input type='submit' 
          value="Process Triggers"
          onClick={this.handleFile} />
          </div>
      
    )
  }
}
 
export default ExcelReader;
``

Answer 1

Put handleFile() code inside a try catch block

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

You can add the disabled attribute to your submit button, based on a local state.

Your new local state would be:

this.state = {
  file: {},
  isFileLoaded: false,
  data: [],
  cols: []
}

then update that state on your handleChange :

handleChange(e) {
  const files = e.target.files;
  if (files && files[0]) this.setState({ file: files[0], isFileLoaded: true });
};

And finally your submit input:

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

Here is a working demo: https://stackblitz.com/edit/react-excel-to-json-parser-g49uhh

Answer 3

Do you want to always show the error ( when didn't upload a file )? For disabling the submit button, you can try with

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