Question

我具有以下组件结构。

Parent-wrapper
    Sibling 1 (input file type)
    Sibling 2 (image thumbnail)

当上载文件更改了同级1时，我想将同级2添加到父级。我想用进度条显示同级2以显示文件正在上传。

我很困惑如何在父组件上耦合子事件。关于我应该阅读的任何指导？或任何帮助都非常感谢。

Answer 1

在“父级”组件中有一个函数handleUploadFile，并将其作为道具传递给同级1。

Parent.js

// ..code..
const handleUploadFile = (file) => {
  // make an api call to upload file, 
  // either fake progress or use a library that supports real progress
  this.setState({showUploadProgress:true})
    //on successful upload
      this.setState({showUploadProgress:false});
      this.setState({file});
}

render(){
  return(
    <Sibling2 uploadProgress={showUploadProgress} file={file}/>
    <Sibling1  onUploadFile={this.handleUploadFile}/>
  )
}

set file from sibling-1 to parent from callback.

Sibling-1

render(){
 return(
   //more views
   <input onChange = {(file) => {this.props.onUploadFile(file)}} type='file'/>
 )
}

在1Sibling-2`中具有逻辑以根据接收到的道具显示/隐藏进度和图像。

希望这会有所帮助！

Answer 2

您可以尝试类似我在此处https://codesandbox.io/s/festive-ramanujan-mh2lh添加的示例的方法吗。

它没有文件上传代码，仅显示了解决问题所需的基本流程。它具有伪造的文件上传进度。

如何在同级事件中将子组件添加到父组件？

2 个答案: