reactjs - 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;

标签： reactjs

Answer 1

首先，如果尚未安装，我们应该为您的浏览器安装反应开发工具扩展。

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

预防性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;