如何解决React 控制表单中的输入值对击键不敏感
输入值似乎没有跟随状态
我将输入值保持在一个状态,但 setState 似乎没有更新该值,这使得输入对击键不敏感
我编写了一个具有确切问题的简化形式
代码如下:
import React,{ Component } from 'react'
import style from "./Prueba.module.css";
export default class Prueba extends Component {
constructor() {
super()
this.state = {
email: '',emailError: ''
}
}
validate(inputStr) {
let error = '';
if (!inputStr) {
error = 'email is required'
} else
if (!inputStr.match(/^([a-zA-Z0-9._%-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,6})*$/)) {
error = 'email is invalid';
}
return error
}
handleInputChange(e) {
this.setState({
...this.state,[e.target.name]: e.target.value
})
let emailErr = this.validate(e.target.value)
if (emailErr)
this.setState({
...this.state,emailError: emailErr
});
}
render() {
return (
<div>
<form>
<input className={this.state.emailError && style.red}
type="text"
name="email"
value={this.state.email}
onChange={this.handleInputChange.bind(this)}
/>
</form>
</div>
)
}
}
当我在 handleInputChange 处理程序中评论验证部分时,输入开始正常运行,但我注意到状态从不包括最后一个字符
我做错了什么?
拉斐尔
解决方法
我用
替换了输入处理程序handleInputChange(e) {
let emailErr = this.validate(e.target.value)
this.setState({
...this.state,[e.target.name]: e.target.value,emailError: emailErr
})
}
效果很好
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。