Reactjs 对提交位置作出反应

我查看了在React中使用onSubmit函数的多个源代码，它们总是将onSubmit触发器作为表单属性，如下所示

import React, { Component } from "react";

import { connect } from "react-redux";
import PropTypes from "prop-types";
import { register } from "../../../actions/auth/auth.action";

import { Container } from "react-bootstrap";
import {
    Button,
    Form,
    Label,
    Input,
  } from "reactstrap";

class Register extends Component {
    state = {
        fname: "",
        lname: "",
        email: "",
        password: ""
    };

    static propTypes = {
        register: PropTypes.func.isRequired
    };

    handleChange = e => {
        this.setState({
            [e.target.name]: e.target.value
        });
    };

    handleSubmit = e => {
        e.preventDefault();

        const { fname, lname, email, password } = this.state;

        const newUser = {
            name: {
                first: fname,
                last: lname
            },
            email: {
                address: email
            },
            password
        };

        // Attempt to register user
        this.props.register(newUser);
    };

    render() {
        return(
                        <Form onSubmit={this.handleSubmit}>
                                <Label for="fname">First Name</Label>
                                <Input
                                    type="text"
                                    name="fname"
                                    id="fname"
                                    placeholder="Enter first name"
                                    className="mb-3"
                                    onChange={this.handleChange}
                                />

                                <Label for="lname">Last Name</Label>
                                <Input
                                    type="text"
                                    name="lname"
                                    id="lname"
                                    placeholder="Enter last name"
                                    className="mb-3"
                                    onChange={this.handleChange}
                                />

                                <Label for="email">Email</Label>
                                <Input
                                    type="email"
                                    name="email"
                                    id="email"
                                    placeholder="Enter email"
                                    className="mb-3"
                                    onChange={this.handleChange}
                                />

                                <Label for="password">Password</Label>
                                <Input
                                    type="password"
                                    name="password"
                                    id="password"
                                    placeholder="Enter password"
                                    className= "mb-3"
                                    onChange={this.handleChange}
                                />
                                <Button color="primary" style={{ marginTop: "2rem" }} block>
                                    Register
                                </Button>
                        </Form>
        );
    };
};

const mapStateToProps = state => ({
    error: state.error   
});

export default connect(
    mapStateToProps,
    { register }
)
(Register);

import React，{Component}来自“React”；
从“react redux”导入{connect}；
从“道具类型”导入道具类型；
从“../../../actions/auth/auth.action”导入{register}”；
从“react bootstrap”导入{Container}；
进口{
按钮
形式，
标签，
输入，
}从“反应带”；
类寄存器扩展组件{
状态={
fname:“”，
名称：“，
电邮：“，
密码：“
};
静态类型={
寄存器：PropTypes.func.isRequired
};
handleChange=e=>{
这是我的国家({
[e.target.name]：e.target.value
});
};
handleSubmit=e=>{
e、 预防默认值（）；
const{fname，lname，email，password}=this.state；
常量newUser={
姓名：{
第一:fname,，
最后：lname
},
电邮：{
地址：电邮
},
密码
};
//尝试注册用户
此.props.register（newUser）；
};
render（）{
返回(
名字
姓
电子邮件
密码
登记
);
};
};
常量mapStateToProps=状态=>({
错误：state.error
});
导出默认连接(
MapStateTops，
{寄存器}
)
（登记册）；

---

但是，当我尝试此操作时，无法调用该函数。（即，当调用是表单属性时，按钮“如何知道”何时调用onSubmit函数）我甚至尝试在按钮中添加type=“submit”属性，但也不起作用。

只需声明type=“submit”在按钮

send stuff

中，type属性是提交表单正在等待的：）并从

handleSubmit

方法中删除

e.preventDefault

，然后重试当提交事件发生时将调用该函数

下面的代码显示触发提交事件的操作

类FormComponent扩展了React.Component{
handleSubmit=e=>{
e、 预防默认值（）；
console.log（'submitted'）；
}
render（）{
返回(


没有属性的按钮

提交键入的按钮

按钮类型按钮（无提交）

);
}
}
ReactDOM.render(
,
document.getElementById（“react”）
);

它看起来像一个自定义的
按钮
组件。您使用的是什么库？很抱歉模棱两可-我添加了导入的librariesHmm，看起来reactstrap
Form
组件没有onSubmit道具。您是否尝试过使用
onClick
作为
Register
按钮？是的，这似乎也不起作用。完整的代码将有助于找出问题。虽然直观，但将提交类型添加到按钮似乎不起作用。@R.Antao，onSubmit应该在表单标记中<代码>

…和类型为submit:）的按钮，这就是我最初拥有的。。我原以为这就是解决方案，但它不起作用。当我在表单标签中有onSubmit时，什么都没有发生（即使在设置Button type=“submit”时），当我在Button标签中有onSubmit时，表单会像提交的数据一样清除，但我在控制台中没有得到日志。我看到您的代码工作了，正如我所期望的那样。可能是因为我使用的是reactstrap库表单组件，所以道具没有正确传递？