这个反应代码中的错误是什么？ 当我在第 1 部分中调用 function 时它不起作用但第 2 部分有效

Question

This is my code. when i use function in part 1 it shows nothing on console. but when i use function in part 2 it shows 'Hello'. but i cant see any differences. What am i doing wrong in part 1?

    handleChange = (e) => {
        this.setState({
            [e.target.id]:e.target.value
        })
    }
    // part 1
    handleSubmit = (e) => {
        e.prevendDefault()
        console.log(this.state)
        console.log("hello")
    }
    // part 2
    handleSubmit = (e) => {
        e.preventDefault();
        console.log(this.state)
        console.log('hello')
      }
    render() {
        return (
            <div className="form-group container w-50">
                <form onSubmit={this.handleSubmit}>
                    <label htmlFor="">Email</label>
                    <input type="email" id="email"className="form-control" onChange={this.handleChange}  />

                    <label htmlFor="">Password</label>
                    <input type="password" id="password" className="form-control" onChange={this.handleChange}/>

                    <button type="submit" className="btn btn-primary" >Submit</button>
                </form>


            </div>
        );
    }

Answer 1

There is a spelling mistake

   handleSubmit = (e) => {
       e.prevendDefault()
       console.log(this.state)
       console.log("hello")
   }

it's preventDefault() but you had prevendDefault .

I would suggest using an IDE or editor with IntelliSense or autocomplete feature to prevent these kinds of mistakes in the future.