我真的很抱歉这个简单的问题,但实际上我的大脑现在不工作,我如何通过react验证我的输入?
这是我的index.js
import React from 'react';
import './style.scss';
const MyComponent = () => (
<div style={{margin:'auto', float:'none'}}>
<table cellSpacing="0" cellPadding="0" style={{margin:'0 auto',marginBottom:'2rem'}}>
<thead>
<tr>
<td>
<span
style={{
height: '100px',
width: '100px',
backgroundColor: 'darkgrey',
borderRadius: '50%',
display: 'inline-block'
}}/>
</td>
<td style={{color:'#2c4e88'}}>
<h1><p>swedavia</p></h1>
<h2><p>swedish airports</p></h2>
</td>
</tr>
</thead>
</table>
<form>
<div style={{color:'darkgrey',padding: '16px'}}>
<label htmlFor="uname">Username</label>
<input type="text" name="uname" required/>
<label htmlFor="psw">Password</label>
<input type="password" name="psw" required/>
<div style={{marginTop:'2rem'}}>
<button type="submit">ОТПРАВИТЬ</button>
<span style={{float: 'right',paddingTop: '16px'}}><a href="#">Forgot password?</a></span>
</div>
</div>
</form>
</div>
);
export default MyComponent;
请帮我创建该验证。
我只需要检查值是否不为空,如果值为空,则将输入边框的颜色更改为红色!
发布于 2018-08-22 03:37:31
import React, { useState } from 'react';
import PropTypes from 'prop-types';
function MyComponent() {
const initialState = {
userName: '',
password: '',
error: ''
}
const [values, setValues] = useState(initialState);
const handleInputChange = event => {
const { name, value } = event.target;
setValues({ ...values, [name]: value.trim() });
};
const handleSubmit = event => {
event.preventDefault();
if (values.userName.length === 0 || values.password.length === 0) {
setValues({ ...values, error: "Please fill this field" });
}
else {
setValues({ ...values, error: "" });
}
// Handle form submission
console.log("formData", values);
};
return (
//call handleInputChange on state change event
//call handleSubmit on onSubmit event
//display the div containing the error and apply the error class
<form onSubmit={handleSubmit}>
{values.error && <div>{values.error}</div>}
<input type='text' name='userName' placeholder="User Name" value={values.userName || ''} onChange={handleInputChange} />
<input type='password' name='password' placeholder="Password" value={values.password || ''} onChange={handleInputChange} />
<button type="submit">Submit</button>
</form>
)
}
MyComponent.propTypes = {
userName: PropTypes.string.isRequired,
password: PropTypes.string.isRequired,
error: PropTypes.string.isRequired
};
export default MyComponent;
发布于 2018-08-19 21:54:51
为此,我想最好创建React.component来保存表单的状态,并在提交时获取状态并验证它的值。我建议您使用一些验证库,如joi-browser或validator
像这样的东西
import React from 'react';
import './style.scss';
class MyComponent extends React.Component {
// initial state
state = {
username : { val: "", err : "" },
// ... etc
}
handleInputChange (e) {
// your logic for input change
// you can even including "pre-validation" in this step
const val = e.target.value;
this.setState({ username: { val, err: "" } })
}
handleSubmit = () => {
const { username, password } = this.state
// better to validate password and login with some library, this is just an example
// you should reset value of input on error and
// add `err`..err should be handled in your template where it should be shown
if ( !username.length ) this.setState({ username: { val: "", err: "Please fill this field" } })
//...submit stuff
}
render = () => {
return ( // your template )
}
}
希望它能有所帮助:)
https://stackoverflow.com/questions/51918230
复制相似问题