显示错误以上传文件或禁用 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 = {&nbsp; file: {},&nbsp; isFileLoaded: false,&nbsp; data: [],&nbsp; cols: []}然后更新你的状态handleChange：handleChange(e) {&nbsp; const files = e.target.files;&nbsp; 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'&nbsp;&nbsp; &nbsp;disabled={!this.state.file}&nbsp; &nbsp;value="Process Triggers"&nbsp; &nbsp;onClick={this.handleFile}/>