Javascript 显示上载文件的错误或禁用de按钮

我有这个代码，你也可以在这里检查代码。当我单击“进程触发器”按钮而不上载文件时。应用程序中断了如何处理警报错误用户必须上载文件或禁用“处理触发器”按钮，直到用户上载文件

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;
``

import React，{Component}来自'React'；
从“office ui Fabric react/lib/Fabric”导入{Fabric}；
从“office ui fabric react/lib/Button”导入{DefaultButton}；
从“XLSX”导入XLSX；
从“/MakeColumns”导入{make_cols}；
从“./types”导入{SheetJSFT}；
类ExcelReader扩展组件{
建造师（道具）{
超级（道具）；
此.state={
文件：{}，
数据：[]，
科尔斯：[]
}
this.handleFile=this.handleFile.bind（this）；
this.handleChange=this.handleChange.bind（this）；
}
手变（e）{
const files=e.target.files；
if（files&&files[0]）此.setState（{file:files[0]}）；
};
handleFile（）{
/*用于设置文件读取器的样板文件*/
const reader=new FileReader（）；
常量rABS=！！reader.readAsBinaryString；
reader.onload=（e）=>{
/*解析数据*/
常数bstr=e.target.result；
常量wb=XLSX.read（bstr，{type:rABS？'binary'：'array'，bookVBA:true}）；
/*获取第一张工作表*/
const wsname=wb.SheetNames[0]；
常量ws=wb.Sheets[wsname]；
/*转换数组的数组*/
const data=XLSX.utils.sheet_to_json（ws）；
/*更新状态*/
this.setState（{data:data，cols:make_cols（ws['！ref']）}，（）=>{
log（JSON.stringify（this.state.data，null，2））；
});
};
if（rABS）{
reader.readAsBinaryString（this.state.file）；
}否则{
reader.readAsArrayBuffer（this.state.file）；
};
}
render（）{
返回(
上载excel以处理触发器




)
}
}
导出默认ExcelReader；
``

将handleFile（）代码放入try-catch块中

handleFile（）{
试一试{
/*用于设置文件读取器的样板文件*/
const reader=new FileReader（）；
常量rABS=！！reader.readAsBinaryString；
reader.onload=（e）=>{
/*解析数据*/
常数bstr=e.target.result；
常量wb=XLSX.read（bstr，{type:rABS？'binary'：'array'，bookVBA:true}）；
/*获取第一张工作表*/
const wsname=wb.SheetNames[0]；
常量ws=wb.Sheets[wsname]；
/*转换数组的数组*/
const data=XLSX.utils.sheet_to_json（ws）；
/*更新状态*/
this.setState（{data:data，cols:make_cols（ws['！ref']）}，（）=>{
log（JSON.stringify（this.state.data，null，2））；
});
};
if（rABS）{
reader.readAsBinaryString（this.state.file）；
}否则{
reader.readAsArrayBuffer（this.state.file）；
};
}捕捉（错误）{
控制台日志（err）；
}
}

是否希望始终显示错误（当未上载文件时）？ 要禁用“提交”按钮，可以尝试使用

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

---

您可以根据本地状态将

disabled

属性添加到提交按钮

您的新地方州将是：

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

然后在

手柄更改中更新该状态：

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} />



这是一个有效的演示：
！this.state.file
的计算结果将始终为false ahh my bad，初始state.file为
{}
，感谢您的cacht:thumbup:显然，在调用
this.setState（{file:files[0]，isFileLoaded:true}之后
文件
仍然是一个空对象是的，我也注意到了这一点。不确定为什么…但这就是为什么要使用一个单独的标志
isFileLoaded
。尽管
文件
看起来是空的，但代码仍然有效。在尝试回答问题时，我想到了与Bruno Monteiro相同的解决方案，但不久之后，我警告说禁用的属性可以通过检查
file
是否有任何值来设置ibute状态，因为file的值是空对象。我尝试了this
object.keys（this.state.file）.length>0
但它不起作用。原因在React中的React documentation>中描述，an始终是非受控组件>，因为它的值只能由用户设置，而不能通过编程进行设置。感谢Mario提供有关非受控组件的信息。也感谢Bruno。我使用了此选项，还添加了一个烤面包机以提供用户确认错误。谢谢贾巴尔