Question

我正在尝试使用以下功能读取Excel数据文件：

handleFiles = (f, evt) => {

    var name = f.name;
    const reader = new FileReader();
    reader.onload = evt => {

      /* Parse data */
      const bstr = evt.target.result;

      const wb = XLSX.read(bstr, { type: "binary" });
      console.log("data>>>", wb);
      /* Get first worksheet */
      const wsname = wb.SheetNames[0];
      const ws = wb.Sheets[wsname];
      /* Convert array of arrays */
      const data = XLSX.utils.sheet_to_csv(ws, { header: 1 });
      /* Update state */
      console.log("Data>>>", data);
    };

    reader.readAsBinaryString(evt.target.files[0]);
  };

然后使用按钮调用功能：

  <Button onClick={this.handleFiles}>UPLOAD</Button>

调用该函数时，错误显示为“ TypeError：无法读取未定义的属性'target'”。有什么解决方案可以纠正此错误？

Answer 1

您的代码

 <Button onClick={this.handleFiles}>UPLOAD</Button>

替换为该代码

<Button onClick={(e)=>this.handleFiles(e)}>UPLOAD</Button>

Answer 2

当您未将参数明确传递给事件处理程序时，即用作

<Button onClick={this.handleFiles}>UPLOAD</Button>，

传递给事件处理程序handleFiles的第一个参数是事件对象。

所以在上面的代码中

handleFiles = (f, evt) => {...}

实际事件对象是f。

由于尚未将第二个evt参数显式传递给事件处理程序handleFiles。因此是undefined，尝试访问target的属性undefined会导致错误。

TypeError：无法读取未定义的属性“ target”

因此，要解决此问题，可以显式传递参数。

<Button onClick={(evt) => this.handleFiles('someArgument', evt)}>UPLOAD</Button>

TypeError：无法读取未定义的属性“目标”

2 个答案: