reactjs - 如何提交 Material UI 登录示例?
问题描述
我使用 Material UI 的示例创建了一个登录组件。
import React from 'react';
import PropTypes from 'prop-types';
import Avatar from '@material-ui/core/Avatar';
import Button from '@material-ui/core/Button';
import CssBaseline from '@material-ui/core/CssBaseline';
import FormControl from '@material-ui/core/FormControl';
import FormControlLabel from '@material-ui/core/FormControlLabel';
import Checkbox from '@material-ui/core/Checkbox';
import Input from '@material-ui/core/Input';
import InputLabel from '@material-ui/core/InputLabel';
import LockOutlinedIcon from '@material-ui/icons/LockOutlined';
import Paper from '@material-ui/core/Paper';
import Typography from '@material-ui/core/Typography';
import withStyles from '@material-ui/core/styles/withStyles';
const styles = theme => ({
main: {
width: 'auto',
display: 'block', // Fix IE 11 issue.
marginLeft: theme.spacing.unit * 3,
marginRight: theme.spacing.unit * 3,
[theme.breakpoints.up(400 + theme.spacing.unit * 3 * 2)]: {
width: 400,
marginLeft: 'auto',
marginRight: 'auto',
},
},
paper: {
marginTop: theme.spacing.unit * 8,
display: 'flex',
flexDirection: 'column',
alignItems: 'center',
padding: `${theme.spacing.unit * 2}px ${theme.spacing.unit * 3}px ${theme.spacing.unit * 3}px`,
},
avatar: {
margin: theme.spacing.unit,
backgroundColor: theme.palette.secondary.main,
},
form: {
width: '100%', // Fix IE 11 issue.
marginTop: theme.spacing.unit,
},
submit: {
marginTop: theme.spacing.unit * 3,
},
});
function SignIn(props) {
const { classes } = props;
return (
<main className={classes.main}>
<CssBaseline />
<Paper className={classes.paper}>
<Avatar className={classes.avatar}>
<LockOutlinedIcon />
</Avatar>
<Typography component="h1" variant="h5">
Sign in
</Typography>
<form className={classes.form}>
<FormControl margin="normal" required fullWidth>
<InputLabel htmlFor="email">Email Address</InputLabel>
<Input id="email" name="email" autoComplete="email" autoFocus />
</FormControl>
<FormControl margin="normal" required fullWidth>
<InputLabel htmlFor="password">Password</InputLabel>
<Input name="password" type="password" id="password" autoComplete="current-password" />
</FormControl>
<FormControlLabel
control={<Checkbox value="remember" color="primary" />}
label="Remember me"
/>
<Button
type="submit"
fullWidth
variant="contained"
color="primary"
className={classes.submit}
>
Sign in
</Button>
</form>
</Paper>
</main>
);
}
SignIn.propTypes = {
classes: PropTypes.object.isRequired,
};
export default withStyles(styles)(SignIn);
现在我想在带有提交处理程序的父组件中使用它。但是我不知道在提交子组件中的表单时如何执行处理程序
import React, { Component } from "react";
import SignIn from "../components/SignIn";
export default class Login extends Component {
constructor(props) {
super(props);
this.state = {
};
this.handleSubmit = this.handleSubmit.bind(this);
}
handleSubmit = async event => {
// Do Stuff
}
render() {
return (
<div className="Login">
<SignIn onSubmit={this.handleSubmit}/>
</div>
);
}
}
解决方案
更改SignIn
组件中的按钮以调用通过 props 传入的提交处理程序,如下所示:
<Button
type="submit"
fullWidth
variant="contained"
color="primary"
className={classes.submit}
onClick={this.props.onSubmit}
>
Sign in
</Button>
推荐阅读
- c++ - Termios 在 Ubuntu 18.04 和 19.04 中的行为不同
- bash - 如果第 2 列大于下一行的第 2 列,则打印行
- java - 如何将响应属性和 JWT 令牌有效负载属性自定义为 lowerCamelCase
- php - Code does not work on web hosting but works on localhost
- c# - 如何通过比较属性从列表中获取项目
- python - Pandas 将索引值与相应的索引值进行比较以找到百分比匹配
- reactjs - Jest 测试中的“类型错误:不是函数”
- android - 反应本机异步存储错误:包 com.facebook.react.module.annotations 不存在
- database - 使用 Spring Data JPA 处理/合并来自 API 响应的重复对象/主键
- reactjs - 恒定导出不适用于反应应用程序