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

Question

这是我的代码。当我在第 1 部分中使用函数时，它在控制台上什么也没有显示。但是当我在第 2 部分中使用函数时，它会显示“你好”。但我看不出有什么不同。我在第 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>
        );
    }

标签： javascriptreactjsreact-forms

Answer 1

有一个拼写错误

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

但preventDefault()你有prevendDefault。

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