onChange事件不會觸發在Mozilla和IE React js/Redux

Question

我是一個相當新的人反應js.我有點困惑爲什麼輸入類型=文件操作不適用於Mozilla和IE瀏覽器它在Chrome中工作正常。我不知道爲什麼它不工作... HAAA是很難找到我犯錯誤知道這可能是一個簡單的noobie錯誤 請幫助我

import React from 'react'; 
    import {connect} from 'react-redux'; 
    import uuid from 'node-uuid' 
    import * as headerAction from '../../Actions/headerActions'; 
    import * as uploadActions from '../../Actions/uploadActions'; 
    import * as notificationActions from '../../Actions/notificationActions'; 
    import shortid from 'shortid' 

    class Header extends React.Component{ 
     static contextTypes = { 
      router:React.PropTypes.object 
     }; 

     constructor(props){ 
      super(props); 

      this.Hovered = this.Hovered.bind(this); 
      this.UnHovered = this.UnHovered.bind(this); 


     } 
     UnHovered(){ 
      this.props.toggleMenu(false); 
     } 
     uniqueNameAndId(){ 
      return uuid.v1().replace(/-/g, ''); 
     } 
     //below function not triggered When onChange Event happen But file upload popsup 
     handleFileUpload(e){ 
      //Not working 
      e.preventDefault(); 
      this.props.setMainPostId(shortid.generate()) 

//Upload for single File not working 
      const reader = new FileReader(); 
      //const file = e.target.files; 
      //console.log(file.length); 
      reader.onload =() => { 
       console.log("Hello",file.name) 
      }; 

      let file = e.target.files[0]; 
      reader.readAsDataURL(file); 

    //Upload for Multiple files NOt working 
      {/*if(file.length <= 5){*/} 
       {/*for(let i=0;i<file.length;i++){*/} 
      //   const Reader = new FileReader(); 
      //   Reader.onload =() => { 
      //    let pushData = { 
      //     postOwnerUsername:null, 
      //     id:this.uniqueNameAndId(), 
      //     name:this.uniqueNameAndId(), 
      //     caption:null, 
      //     blobData:Reader.result 
      //    }; 
      //    console.log(pushData) 
      //    this.props.pushtoReducer(pushData) 
      //   }; 
      //   Reader.readAsDataURL(file[i]) 
      //  } 
      //  this.props.removeUploadMenu(false) 
      //  this.context.router.push('/upload'); 
      // }else{ 
      //  console.log('No Dude') 
      //  this.props.popErrorNotification(true,"#FF5D5D","Current Max Photo 5") 
      // } 




     } 
     loggedInMenu(){ 
      return(
       <div> 

        <li>Explore</li> 
        <li>My uploads</li> 
        {this.props.toggle.removeUploadMenu ? 
         <li> 
          <label htmlFor="upload-photo">Upload</label> 

          <input onChange={this.handleFileUpload.bind(this)} id="upload-photo" type="file" multiple/> 
         </li>: 
         "" 
        } 

        <li>Profile</li> 
        <li><a href="/logout">Logout</a></li> 
       </div> 
      ) 
     } 
     loggedOutMenu(){ 
      return(
       <div> 
        <li onClick={()=>this.props.toogleSignInOut(true)}>SignUp/SignIn</li> 
        <li>Explore</li> 

       </div> 
      ) 
     } 
     renderMenu(){ 
      return(
       <div onMouseLeave={this.UnHovered}> 
        <div className="dtcen"> 
         <div className="dt"> 

         </div> 
        </div> 

        <div className="dropdown"> 

         {this.props.logInStatus.loginStatus ? this.loggedInMenu():this.loggedOutMenu()} 


        </div> 
       </div> 
      ) 
     } 
     Hovered(){ 

      this.props.toggleMenu(true); 
     } 
     render(){ 

      // console.log('From uuis',this.uniqueNameAndId()) 
      //console.log("Login Status",this.props.toggle.removeUploadMenu) 

      return(

       <header> 
        <div className="logo"> 
         <p>Masklor </p> 
        </div> 
        <div className="navtoggle"> 
         <div onMouseEnter={this.Hovered} className="triangle"> 
          <p>Menu</p> 
         </div> 

         {this.props.toggle.menuToggle ? this.renderMenu() : ""} 

        </div> 
       </header> 


      ) 
     } 
    } 

    const mapStateToProps = (state) => { 
     return{ 
     toggle:state.toggle, 
      logInStatus:state.logInStatus, 
      photos:state.photoUpload 
     } 
    }; 

    const mapDispatchToProps = (dispatch) => { 
     return{ 
      toggleMenu:bool => dispatch(headerAction.toggleStatus(bool)), 
      toogleSignInOut:bool => dispatch(headerAction.toggleSignPop(bool)), 
      pushtoReducer:object => dispatch(uploadActions.setPhotosState(object)), 
      popErrorNotification:(bool,color,message) => dispatch(notificationActions.popUpNotification(bool,color,message)), 
      removeUploadMenu:bool => dispatch(headerAction.removeUploadMenu(bool)), 
      setMainPostId:id =>dispatch(uploadActions.setIdforMainPost(id)) 
     } 
    } 

    export default connect(mapStateToProps,mapDispatchToProps)(Header) 

Answer 1

我看到你的代碼可能會生成JavaScript功能在控制流程塊，chorme即將工作正常，但會與mozilla，所以你將不得不把功能以外的條件塊，看到我的樣本：
在Mozilla中，這將無法正常工作：

function myDataCall(data) { 
    if(data) { 
     processData(data); 
     function processData(obj) { 
      console.log(obj); 
     } 
    } 
} 

這將工作：

function myDataCall(data) { 
    //Work, cross browser compatible 
    if(data) { 
     processData(data); 
    } 
    function processData(obj) { 
     console.log(obj); 
    } 
} 

我希望這有助於問候！