TypeError: event.preventDefault is not a function

255
May 05, 2021, at 01:00 AM

I am following a tutorial and copied everything but got this error "TypeError: event.preventDefault is not a function" in the onSubmit() but the event.preventDefault works in the onChange()

Here is the code i have:

    import '../App.css';
    import ipfs from './ipfs'
    class Add extends Component {
    
    constructor(props){
        super(props)
        this.state ={
            
            ipfsHash: "",
            buffer: null
        }
        this.captureFile = this.captureFile.bind(this);
        this.onSubmit = this.onSubmit(this);
    }
    captureFile(event){
        event.preventDefault()
        const file = event.target.files[0]
        const reader = new window.FileReader()
        reader.readAsArrayBuffer(file)
        reader.onloadend = () =>{
            this.setState({ buffer: Buffer(reader.result) })
            console.log('buffer', this.state.buffer)
        }
    }
    onSubmit(event){
        event.preventDefault()
        ipfs.files.add(this.state.buffer, (error,result) =>{
            if(error){
                console.error(error)
                return
            }
            this.setState( {ipfsHash: result[0].hash})
            console.log('ipfsHash', this.state.ipfsHash)
        })
        
    }
    render(){
        return(
            <div>
                <h1>Add a Graduate</h1>
                <form onSubmit={this.onSubmit}>
                    <input type='file' onChange={this.captureFile} />
                    <input type='submit' />
                </form>
                <h1>Transcript of Record</h1>
                <img src={"https://ipfs.io/ipfs${this.state.ipfsHash}"} alt=""></img>
            </div>
        )
      }
    }
    export default Add;

I dont understand what is the error all about.

Answer 1

In the constructor you are calling onSubmit method instead of binding this: Let's change this.onSubmit = this.onSubmit(this); to:

this.onSubmit = this.onSubmit.bind(this);
Rent Charter Buses Company
READ ALSO
Which CSS properties affect the accesibility tree?

Which CSS properties affect the accesibility tree?

By the sacred separation of contents and presentation, I assumed that CSS was ignored by screen readersThis naive assumption is false

108
ReferenceError: require is not defined on github action

ReferenceError: require is not defined on github action

I run the npm run build on github action but it shows the error of ReferenceError: require is not defined

188
Need help in Jcrop - Class jcrop-tracker

Need help in Jcrop - Class jcrop-tracker

I have developed a Picture Capture WebApp using a Live Camera and Upload File

110
Is there a way to run a TestNG test for a particular class in IntelliJ without compiling the entire project?

Is there a way to run a TestNG test for a particular class in IntelliJ without compiling the entire project?

I have working project, If I write any new test case with TestNG framework until I compile the entire project it's not getting compiledEven for a small fix, I have to compile the entire project

142