React JS 中的简单表单答案

【问题标题】：Simple Form in React JSReact JS 中的简单表单
【发布时间】：2020-06-22 19:41:39
【问题描述】：

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

【问题讨论】：

标签： reactjs

【解决方案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;

【讨论】：

我仍然收到此错误； Uncaught (in promise) 无法建立连接。接收端不存在。
您使用的是哪种浏览器？
我正在使用 chrome
我用的是边缘浏览器而不是 chrome。它可以工作。谢谢。

【解决方案2】：

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

由于您的 html 文件不直接链接到您的单个 JS 文件，它需要一个源映射才能显示日志的来源。 React 项目默认没有源映射，所以我建议您关闭源映射，这确实意味着您在控制台中看不到日志的来源，但无论如何 react 都会为您执行此操作.

this 线程上的第一个解决方案很好地解释了如何关闭源映射。

【讨论】：

我仍然收到此错误； Uncaught (in promise) 无法建立连接。接收端不存在。