Question

我很反应j的新人。我有点困惑为什么输入类型=文件操作不能在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);
    }
}

我希望这有帮助，尊重！

在Mozilla和IE React js / Redux

1 个答案: