React JS中的简单形式

Question

我刚刚开始学习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;

Answer 1

首先，如果尚未安装浏览器，我们应该为它安装react dev tools扩展。

您应该使用prevenDefault方法来提交函数，以防止刷新页面。 并使用按钮类型“提交”到您的“提交”按钮。

Prevendefult Mdn

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;

Answer 2

这与您的表单无关，但与chrome无关，因为它现在允许源地图。

由于您的html文件未直接链接到您的单个JS文件，因此它需要一个源映射，以便能够显示日志的来源。默认情况下，React项目没有源映射，所以我建议您仅关闭源映射，这意味着您看不到控制台中日志的来源，但无论如何React都会为您完成

this线程上的第一个解决方案很好地说明了如何关闭soucemaps。