React-记录-form提交的bug

记录-form提交的bug

先展示最后的jsx代码：

render() {
                    return (
                        <form action="http://www.atguigu.com" onSubmit={this.handleSubmit}>
                            用户名：<input ref={c => this.username = c} type="text" name="username"/>    
                            密码：<input ref={c => this.password = c} type="password" name="password"/>
                            <button>登录</button>    
                        </form>
                    )
                }

• action：表示的是我们表单数据提交的地址，

• 如果给在form标签内部的input都添加相应的name属性的话，最后点击登录触发onSubmit函数的时候，默认会跳到http://www.atguigu.com 路径下，但是我们给input标签添加了name属性之后，会自动的把我们在input中输入的东西自动作为路径的query传递过去，也就是以http://www.atguigu.com?name="gogocj"&password="123456" 的形式跳转了

• 但是如果不想要默认的跳转的话，就可以进行如下的操作

 handleSubmit = (event) => {
                event.preventDefault() // 阻止表单提交默认事件
                const {username, password} = this
                alert(`你输入的用户名是：${username.value}, 你输入的密码是：${password.value}`)
            }

核心就是 event.preventDefault() 阻止默认的表单提交时间