我刚刚开始学习React。我创建了一个简单的表格。现在我要登录控制台。但这会带来错误。
以下是错误的图片:
还附上我的代码:
import React from 'react';
function RegistrationForm(props){
function handleSubmit(){
console.log('Inside handle Submit');
}
return(
<form onSubmit={handleSubmit}>
<div className="form-group">
<label htmlFor="task">Add task</label>
<input id="task" className="form-control"/>
</div>
<button className="btn btn-primary">Submit</button>
</form>
)
}
export default RegistrationForm;
答案 0 :(得分:2)
首先,如果尚未安装浏览器,我们应该为它安装react dev tools扩展。
您应该使用prevenDefault方法来提交函数,以防止刷新页面。 并使用按钮类型“提交”到您的“提交”按钮。
import React from 'react';
function RegistrationForm(props){
function handleSubmit(e){
e.preventDefault()
console.log('Inside handle Submit');
}
return(
<form onSubmit={handleSubmit}>
<div className="form-group">
<label htmlFor="task">Add task</label>
<input id="task" className="form-control"/>
</div>
<button type="submit" className="btn btn-primary">Submit</button>
</form>
)
}
export default RegistrationForm;
答案 1 :(得分:1)
这与您的表单无关,但与chrome无关,因为它现在允许源地图。
由于您的html文件未直接链接到您的单个JS文件,因此它需要一个源映射,以便能够显示日志的来源。默认情况下,React项目没有源映射,所以我建议您仅关闭源映射,这意味着您看不到控制台中日志的来源,但无论如何React都会为您完成
this线程上的第一个解决方案很好地说明了如何关闭soucemaps。