- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
每当我向我的一个类添加模式时,我都会收到此错误。
TypeError: Cannot read property 'hasOwnProperty' of undefined
这是一个基本示例,我只是试图始终显示基本模式。有任何想法吗?我尝试过各种应该有效的示例,但我尝试过的任何方法都无法阻止该错误。看来如果我添加 Modal 那么它就会出错。
编辑:解决了问题。该模式需要一个根级子级,您需要将所有内容嵌入其中。
import React from 'react';
import { connect } from 'react-redux';
import { Link } from 'react-router-dom';
import Avatar from '@material-ui/core/Avatar';
import Button from '@material-ui/core/Button';
import CssBaseline from '@material-ui/core/CssBaseline';
import TextField from '@material-ui/core/TextField';
import FormControlLabel from '@material-ui/core/FormControlLabel';
import Checkbox from '@material-ui/core/Checkbox';
import Grid from '@material-ui/core/Grid';
import LockOutlinedIcon from '@material-ui/icons/LockOutlined';
import Typography from '@material-ui/core/Typography';
import { withStyles } from '@material-ui/core/styles';
import Container from '@material-ui/core/Container';
import { Schema, Field } from "v4f";
import Modal from '@material-ui/core/Modal';
const styles = theme => ({
'@global': {
body: {
backgroundColor: theme.palette.common.white,
},
},
paper: {
marginTop: theme.spacing(8),
display: 'flex',
flexDirection: 'column',
alignItems: 'center',
},
avatar: {
margin: theme.spacing(1),
backgroundColor: theme.palette.secondary.main,
},
form: {
width: '100%', // Fix IE 11 issue.
marginTop: theme.spacing(1),
},
submit: {
margin: theme.spacing(3, 0, 2),
},
});
const initState = {
email: "",
password: "",
errors: {}
};
const SignInValidator = Schema(
{
email: Field()
.string()
.email({ message: "Not an e-mail address" })
.required({ message: "E-mail is required" }),
password: Field()
.string()
.required({ message: "Password is required" })
},
{ verbose: true, async: true }
// We set the options on creation all call to Schema Product will be verbose and async
);
class SignIn extends React.Component
{
constructor(props) {
super(props);
this.state = { ...initState };
}
//Handle Submit & Handle Change
handleChange = (e) => {
this.setState({ [e.target.name]: e.target.value });
}
handleDirty = (e) => {
const { name, value } = e.target;
const isValid = SignInValidator[name].validate(value, {
verbose: true,
values: this.state
});
if (isValid !== true) {
this.setState({
errors: { ...this.state.errors, [name]: isValid }
});
}
else {
this.setState({
errors: { ...this.state.errors, [name]: undefined }
});
}
}
handleSubmit = (e) => {
e.preventDefault();
SignInValidator.validate(this.state)
.then(data => {
this.login();
})
.catch(errors => {
this.setState({ errors });
});
}
login = (e) => {
var email = encodeURI(this.state.email);
var password = encodeURI(this.state.password);
fetch(`/login/login?Username=${email}&Password=${password}`)
.then(data => {
console.log(data);
alert("Login Success!");
//Navigate to the dashboard
this.setState(initState);
})
.catch(e => {
alert("Login Failed");
console.error(e);
});
};
render()
{
const { classes } = this.props;
return (
<Container component="main" maxWidth="xs">
<CssBaseline />
<div className={classes.paper}>
<Avatar className={classes.avatar}>
<LockOutlinedIcon />
</Avatar>
<Typography component="h1" variant="h5">
Sign in
</Typography>
<form className={classes.form}>
<TextField
variant="outlined"
margin="normal"
required
fullWidth
id="email"
label="Email Address"
name="email"
autoComplete="email"
onChange={this.handleChange}
onBlur={this.handleDirty}
error={this.state.errors.email !== undefined}
helperText={this.state.errors.email}
value={ this.state.email }
/>
<TextField
variant="outlined"
margin="normal"
required
fullWidth
name="password"
label="Password"
type="password"
id="password"
onChange={this.handleChange}
onBlur={this.handleDirty}
error={this.state.errors.password !== undefined}
helperText={this.state.errors.password}
value={this.state.password}
autoComplete="current-password"
/>
<FormControlLabel
control={<Checkbox value="remember" color="primary" />}
label="Remember me"
/>
<Button
type="submit"
fullWidth
variant="contained"
color="primary"
className={classes.submit}
onClick={this.handleSubmit}
>
Sign In
</Button>
<Grid container>
<Grid item xs>
<Link to='/' variant="body2">
Forgot password?
</Link>
</Grid>
<Grid item>
<Link to='/sign-up' variant="body2">
{"Don't have an account? Sign Up"}
</Link>
</Grid>
</Grid>
</form>
<Modal open={true}>
Hello
</Modal>
</div>
</Container>
);
}
}
export default connect()(withStyles(styles)(SignIn));
最佳答案
MUI Modal 组件出现错误的原因
TypeError: Cannot read property 'hasOwnProperty' of undefined
是你小时候没有给过JSX组件吗?
<小时/>从此改变
<Modal open={true}>
Hello
</Modal>
至
<Modal open={true}>
<div>
Hello
</div>
</Modal>
<小时/>
如果通过关键字hasOwnProperty搜索Material-UI项目的源码。或者跟随错误回调堆栈
你会发现一些东西
function getHasTransition(props) {
return props.children ? props.children.props.hasOwnProperty('in') : false;
}
该错误意味着 props.children.props
未定义,这给了调试思路。
关于javascript - React Material-UI 模态类型错误 : Cannot read property 'hasOwnProperty' of undefined,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/56622246/
我来自 Asp.Net 世界,试图理解 Angular State 的含义。 什么是 Angular 状态?它类似于Asp.Net中的ascx组件吗?是子页面吗?它类似于工作流程状态吗? 我听到很多人
我一直在寻找 3 态拨动开关,但运气不佳。 基本上我需要一个具有以下状态的开关: |开 |不适用 |关 | slider 默认从中间开始,一旦用户向左或向右滑动,就无法回到N/A(未回答)状态。 有人
我是一名优秀的程序员,十分优秀!