- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
我正在使用功能组件和 Material ui。我创建了一个带有 2 个文本字段的表单。我只想在满足特定条件时启用错误 Prop 。并且仅在单击提交按钮时检查条件。不知何故,它只检查少数条件。我很困惑为什么会发生这种情况。
如果有人可以看看我的代码并帮助我:
代码:
import React, {useState, useEffect} from 'react'
import axios from 'axios'
import image from '../images/app_icon_without_bg.png'
import {Link} from 'react-router-dom'
import Button from '@material-ui/core/Button/index'
import MuiThemeProvider from '@material-ui/core/styles/MuiThemeProvider'
import Card from '@material-ui/core/Card'
import TextField from '@material-ui/core/TextField'
import Avatar from '@material-ui/core/Avatar'
import {amber} from '@material-ui/core/colors'
import {makeStyles} from '@material-ui/core/styles'
import {styled} from '@material-ui/core/styles'
import {Redirect} from "react-router-dom"
const MyCard = styled(Card)({
borderRadius: 20,
// boxShadow:'0 3px 5px 2px rgba(255, 105, 135, .3)',
background: '#f3f3f3',
boxShadow: '6px 6px 10px 0px rgba(112,112,112,0.16), -6px -6px 10px 0px #FFFFFF',
padding: '50px 10px',
})
const MyAvatar = styled(Avatar)({
background: 'linear-gradient(45deg, #008080 30%, #20B2AA 90%)',
border: 0,
color: 'white',
height: 90,
width: 90,
margin: "auto",
})
const MyButton = styled(Button)({
background: 'linear-gradient(45deg, #008080 30%, #20B2AA 90%)',
border: 0,
color: 'white',
width: 100,
justifyContent: "center",
textDecoration: "none",
boxShadow: '0px 8px 10px -5px rgba(124,133,133,1)'
// margin:"auto"
})
// const useStyles = makeStyles((theme) => ({
// root: {
// display: 'flex',
// '& > *': {
// margin: theme.spacing(1),
// },
// },
//
//
// amber: {
// backgroundColor: amber[500],
// width: theme.spacing(7),
// height: theme.spacing(7),
//
// },
//
// button_color:{
// backgroundColor: amber[500],
//
// }
//
//
// }))
function Login() {
// const classes = useStyles()
//USE EFFECT
useEffect(() => {
}, []
)
//SETTING THE STATES
// const [username,setUserName]=useState('')
// const [password,setPassword]=useState('')
// const [errorMessage,setErrorMessage]=useState('')
const [form, setForm] = useState({
username: '',
password: '',
errorUser: false,
errorPassword: false,
helperTextUserName: '',
helperTextPassword: ''
})
const changeHandler = (event) => {
setForm({
...form,
[event.target.name]: event.target.value
})
}
//POSTING USERNAME AND PASSWORD TO DB
function handleClick(event) {
event.preventDefault()
const userObject = {
userName: form.username,
password: form.password
}
let letters = /^[A-Za-z0-9]+$/
// let isValid = letters.test(form.username)
// let err = ''
if (form.username !== '' && !form.username.match(letters)) {
// err = <p>Please enter your username.</p>
setForm({
...form,
helperTextUserName: 'Please use alphanumerics.',
errorUser: true
})
}
else if (form.username === '') {
// err = <p>Please enter your username.</p>
setForm({
...form,
helperTextUserName: 'Please enter your username.',
errorUser: true
})
} else if (form.password === '') {
// err = <p>Please enter your password.</p>
setForm({
...form,
helperTextPassword: 'Please enter your password.',
errorPassword: true
})
} else if (form.username === '' && form.password === '') {
// err = <p>Please fill the fields to proceed.</p>
setForm({
...form,
helperTextUserName: 'Please fill the fields.',
errorUser: true,
errorPassword: true
})
} else {
axios.post(`/api/login`, userObject)
.then(window.location = "/home")
.catch(err => console.error(err))
}
}
return (
<div className='login'>
<MyCard className='card'>
<div>
<img src={image} width="90" height="100px"/>
<p className={'card-heading-main'}>COMPLAINT MANAGEMENT SYSTEM</p>
<form>
<TextField
error={form.errorUser}
helperText={form.helperTextUserName}
autoFocus
id="outlined-basic"
variant="outlined"
type="username"
label="Username"
name={'username'}
className={'login-input'}
placeholder="john123"
onChange={changeHandler}
/>
<br/>
<br/>
<TextField
error={form.errorPassword}
helperText={form.helperTextPassword}
id="outlined-basic"
variant="outlined"
label="Password"
name={'password'}
className={'login-input'}
type="password"
onChange={changeHandler}
/>
<br/>
<br/>
<br/>
<MyButton onClick={handleClick} variant="raised">Submit</MyButton>
</form>
</div>
</MyCard>
</div>
)
}
export default Login
最佳答案
您需要防止默认提交按钮行为,并且您忘记在之前的状态中进行合并,从而导致在状态中放置了错误的数据。 ( username
或 password
== undefined
将通过所有检查)
//POSTING USERNAME AND PASSWORD TO DB
function handleClick(evt) {
evt.preventDefault();
const userObject = {
userName: form.username,
password: form.password
}
let username = form.username
let password = form.password
let letters = /^[0-9a-zA-Z]+$/
let err = ''
if (username !== '' && !username.match(letters)) {
// err = <p>Please enter your username.</p>
setForm({
...form,
helperTextUserName: 'Please use alphanumerics.',
errorUser: true
})
}
if (username === '') {
// err = <p>Please enter your username.</p>
setForm({
...form,
helperTextUserName: 'Please enter your username.',
errorUser: true
})
} else if (password === '') {
// err = <p>Please enter your password.</p>
setForm({
...form,
helperTextPassword: 'Please enter your password.',
errorPassword: true
})
} else if (username === '' && password === '') {
// err = <p>Please fill the fields to proceed.</p>
setForm({
...form,
helperTextUserName: 'Please fill the fields.',
errorUser: true,
errorPassword: true
})
} else {
axios.post(`/api/login`, userObject)
.then(window.location = "/home")
.catch(err => console.error(err))
}
}
关于javascript - Material UI 文本字段错误在 reactjs 中无法正常工作,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/61133239/
我是 angular 的新手,想动态地更改 angular Material 主题,我知道如何通过制作 scss 文件来制作不同的主题,定义 3 种颜色,包括 mat 属性和功能,但后来我在 angu
我猜,是不允许在 Material 网格(嵌套网格)中放置 Material 网格吗? 有人可以确认我的假设吗? (我正在使用 Angular Material 6。) l
已结束。此问题正在寻求书籍、工具、软件库等的推荐。它不满足Stack Overflow guidelines 。目前不接受答案。 我们不允许提出寻求书籍、工具、软件库等推荐的问题。您可以编辑问题,以便
我一直在 material-ui react 库中看到对名为“LeftNav ”的组件的引用(例如: Material UI - Open LeftNav / Drawer on AppBar cli
我正在使用 mat-list而且我无法在移动设备上滚动它。 它是一个 mat-nav-list,里面有一些 mat-list-item,我的列表结构类似于: dashboard
我是网络开发的新手,正在尝试使用 material-ui。我看到一些演示代码使用 withStyle,还有一些使用 withTheme。它们之间有什么区别吗?非常感谢! 最佳答案 我认为接受的答案没有
我正在研究 Material 设计和 Material 设计中描述的一些指南。 我似乎遗漏了一个部分(不确定是否应该涵盖),即 Google 如何处理 Fieldsets。该文档确实涵盖了各个输入,但
我正在根据到目前为止所学的知识使用 Material 设计创建一个示例应用程序,但我注意到 Material 设计的开箱即用字体对于不同的组件是不同的。对于 Material 对话框中的 Materi
我确实有角度 6,尽管 ng generate @angular/material:material-nav --name home不工作 得到类似的错误 Collection "@angular/m
我正在使用图书馆 material-table对于我的应用程序中的数据表。我将数据 Prop 设置为使用来自 this.state.data 的数据,并且添加行将通过使用 setState 在我的表上
如何在 Angular Material Design 中设置工具栏下方的侧导航?这样 sidenav 就不会越过工具栏.. 最佳答案 这是一个布局问题。只需使用此页面结构:
我使用的是角 Material 2,但我认为这也适用于角 Material 1。 假设我想使用角度 Material 选项卡,但我想隐藏选项卡或向其添加一些特定样式。 所以我有以下 html/angu
我安装了 material-ui“^1.0.0-beta.36”。文档说有日期选择器。 但我在 node_modules\material-ui 和任何子文件夹中都找不到它。 更改日志表明计划在未来版
从一小时前开始,我在 Material 设计图标 cdn 上不断收到网络错误,因为错误名称未解析。 http://cdn.materialdesignicons.com/5.4.55/css/mate
如何在不失去波纹效果的情况下更改角 Material 开关按钮的颜色? 请在此处查看代码笔:http://codepen.io/shyambhiogade/pen/LpNGBP 我已将颜色更改为 #0
对于textfield并选择,我看到我们具有以下选项来添加variant =“ outlined”。 但是,我看不到material-ui / DatePicker。有人可以建议如何使用实质性UI将v
在 3.1.0 版本中使用“@material-ui/core” 全局覆盖步进器图标的颜色非常容易全局 createMuiTheme({ overrides: { MuiStepIco
我在我的应用程序脚本插件中使用 materializecss,当我尝试动态添加工具提示时,提示不会使用新标签更新。我尝试了几种变体,甚至仔细检查了小费是否正在改变,确实如此。问题是它似乎没有用更新的文
有谁知道当模式确定时如何在 Material 进度微调器中显示不完整的部分。现在我是这样的 . 但我想要这样 最佳答案 这可以做到,但它主要是一个黑客。这个想法是使用一个带有与微调器匹配的边框的 di
我今天发现了这个很棒的 UI 框架,并花了很多时间浏览文档,我必须说,我已经爱上了它。现在我想将它用于一个中等规模的项目,但我有两个顾虑: 我找不到任何网格系统,我该如何进行布局? 如何让它响应? 我
我是一名优秀的程序员,十分优秀!