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

Question

这是我的代码。 当我在第 1 部分中使用 function 时，它在控制台上没有显示任何内容。 但是当我在第 2 部分中使用 function 时，它显示“你好”。 但我看不出有什么不同。 我在第 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

有一个拼写错误

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

它是preventDefault()但你有prevendDefault 。

我建议使用 IDE 或具有IntelliSense或自动完成功能的编辑器，以防止将来出现此类错误。