javascript - 反应回调函数不起作用。发现了一个错误

Question

我在反应中总共创建了 4 个组件

2个是男人组件，其余两个是孩子

组件一

class HsProfileCover extends PureComponent {

  constructor(props) {
    super(props);

    this.state = {
      imgSrc: this.props.img
    }

    this.onCoverImageSelect = this.onCoverImageSelect.bind(this);
  }



  onCoverImageSelect(srcB64DataCover) {  
    console.log("cover");
    this.setState({ imgSrc: srcB64DataCover })
  }


  render() {
    return (
      <div className="hs_profile_cover">
        <div className="cover_outer">
          <HsProfileImgChangeButton onImageSelect={this.onCoverImageSelect} />
          <div className="cover_shadow"></div>
          <img className="img-fluid" src={this.state.imgSrc} alt={this.props.alt} />
        </div>
      </div>
    );
  }
}

组件 2

class HsProfileBoxThumbImg extends PureComponent { 

  constructor(props) {
    super(props);

          this.state = {
            imgSrc : this.props.img
          }

        this.onThumbImageSelect = this.onThumbImageSelect.bind(this);
    }



    onThumbImageSelect(srcB64DataThumb){    
    console.log("thumb");
    this.setState({imgSrc : srcB64DataThumb})
  }




  render () {
    return (
      <div className="hs_com_profile_thumb_img_box">
          <HsProfileImgChangeButton onImageSelect={this.onThumbImageSelect} />
          <img className="img-thumbnail" src={this.state.imgSrc} alt={this.props.alt}/>
      </div>
        
    );
  }
}

两个组件都有一个子组件HsProfileImgChangeButton

const  HsProfileImgChangeButton = React.memo(function MyComponent(props) {
  return (
    <div className="hs_com_profile_img_change_button shadow">
      <HsSelectFileHelper {...props}  />        
       <div className="ed_outer">
            <button className="btn btn-link ed_inner">
                <i className="hs-i-edit"></i>
            </button>
          </div>
    </div>
      
  );
});


export default HsProfileImgChangeButton;

这个子组件调用 **HsSelectFileHelper ** 来完成文件选择工作

class HsSelectFileHelper extends PureComponent { 

      constructor(props) {
        super(props);

        this.onSelectFile = this.onSelectFile.bind(this);
    }

    


    onSelectFile(e) {
          if (e.target.files && e.target.files.length > 0) {
            if(e.target.files.length===1){
              const reader = new FileReader();
              reader.addEventListener('load', () => {
                this.onImageSelect(reader.result )
            });
            reader.readAsDataURL(e.target.files[0]);
            }else{
              this.onImagesSelect(e.target.files);
          }
        }
    }

    onImageSelect(srcB64Data){
      if(this.props.onImageSelect!==undefined && this.props.onImageSelect!==null){
        this.props.onImageSelect(srcB64Data);
      }
    }

    onImagesSelect(files){
      if(this.props.onImagesSelect!==undefined && this.props.onImagesSelect!==null){
        this.props.onImagesSelect(files);
      }
    }

  render () {
    return (
      <div className="hs_select_image_helper">        
         <input type="file" className="sr-only d-none" id="avatar-change" onChange={this.onSelectFile} name="image" accept="image/*" />
         <label className="hs_img_select mb-0" htmlFor="avatar-change"></label>
      </div>
        
    );
  }
}

一切正常。

但

我从孩子那里调用回调函数的所有内容。无论我做什么，它都会从HsProfileCover调用 Colback。它从不从HsProfileBoxThumbImg调用回调

我是在做错什么还是我发现了我的错误？

标签： javascriptreactjsreact-nativereact-redux