reactjs - 对提交位置做出反应
问题描述
我查看了在 React 中使用 onSubmit 函数的多个来源,它们总是将 onSubmit 触发器作为 Form 属性放置,就像这样
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);
但是,当我尝试这样做时,无法调用该函数。(即,当调用是表单属性时,按钮如何“知道”何时调用 onSubmit 函数)我什至尝试向按钮添加 type="submit" 属性,但这也不起作用。
解决方案
只需在您的按钮中声明 type="submit"<button type="submit">send stuff</button>
类型属性是 onSubmit 表单正在等待的:) 并e.preventDefault
从您的handleSubmit
方法中删除并重试
推荐阅读
- ruby-on-rails - 查找关联不存在的记录
- r - 光栅图 - 分辨率越高,文本越小
- python - 计算账户金额的问题 Python
- asp.net - 能够通过 ASPX 母版页中的菜单下拉列表滚动
- java - 如何使用谓词构建器返回“今日订单”
- c# - Asp.net MVC Booked StartDate 和 EndDate 检查
- javascript - 使用 Leaflet 为 GeometryCollection 类型的几何设置样式
- android - 将 Android 深度相机流 (DEPTH16) 捕获为 OpenGL ES 纹理
- swift - 如何使用 Alamofire + RxSwift 同步刷新访问令牌
- php - 如何使用 php://fd/ 包装器?