React JS中的简单表单

Question

我刚开始学反应。我创建了一个简单的表单。现在我想登录控制台。但它给出了一个错误。

以下是错误的图像：

同时附上我的代码：

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

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

因为你的html文件没有直接链接到你的JS文件，所以它需要一个源映射来显示日志的来源。默认情况下，React项目没有源映射，所以我建议您关闭源映射，这意味着您看不到控制台中的日志来自哪里，但React无论如何都会为您这样做。

这个线程的第一个解决方案很好地解释了如何关闭地图。

Answer 2

首先，我们应该为您的浏览器安装react-dev工具扩展（如果尚未安装）。

您应该调用submit函数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;