javascript - React：将 File 对象共享给父组件

Question

我需要使用从父组件作为道具传递的函数，将通过文件输入创建的 File 对象从子组件（下面的代码）共享到其父组件。

import React, { Component } from "react";

class FileInput extends Component {
  watchFile = event => {
    event.stopPropagation();
    event.preventDefault();
    const file = event.target.files[0];
    const metadata = {
      contentType: file.type
    };
    this.props.getKBISinput({ file, metadata });
  };
  render() {
    return (
      <label className="btn btn-default">
        Browse<input
          type="file"
          style={{ display: "none" }}
          onChange={this.watchFile}
        />
      </label>
    );
  }
}

export default FileInput;

这是传递的函数：

  getKBISinput = kBis => {
    this.setState({ kBis });
  };

父组件的状态：

  state = {
    // ...
    kBis: {
      file: {},
      metadata: ""
    }
  };

这行不通。一旦设置为父组件的状态，我会尝试从 React 开发工具中查看 File 对象。

它就这样卡住了，我无法从树视图中打开它：

我得到这个控制台错误：

永远不必在组件之间共享特殊类型的对象。在这种情况下，理想的做法是什么？

Answer 1

这行 this.props.getKBISinput({file, metadata}) 似乎不正确，因为您传递的对象没有键值对。将它们作为参数传递。

在父组件中。

getKBISinput(file, metadata){
    this.setState({ kBis: {
           file: file,
           metadata: metadata
        } 
      });
};

<FileInput getKBISinput={(file, metadata)=>this.getKBISinput(file, metadata)}/>

在子组件中：

watchFile = event => {
    event.stopPropagation();
    event.preventDefault();
    const file = event.target.files[0];
    const metadata = {
      contentType: file.type
    };
    this.props.getKBISinput(file, metadata);
  };