Javascript 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>
    )
}

import React，{Component}来自“React”
从“/Prueba.module.css”导入样式；
导出默认类Prueba扩展组件{
构造函数（）{
超级（）
此.state={
电子邮件：“”，
电子邮件错误：“”
}
}
验证（inputStr）{
让误差=“”；
如果（！inputStr）{
错误='需要电子邮件'
}否则
如果（！inputStr.match（/^（[a-zA-Z0-9.\u%-]+@[a-zA-Z0-9.-]+\[a-zA-Z]{2,6}）*$/）{
错误='电子邮件无效'；
}
返回错误
}
handleInputChange（e）{
这是我的国家({
…这个州，
[e.target.name]：e.target.value
})
让emailErr=this.validate（e.target.value）
如果（电子邮件错误）
这是我的国家({
…这个州，
emailError:emailErr
});
}
render（）{
返回(
)
}

}

当我在handleInputChange处理程序中对验证部分进行注释时，输入开始正常运行，但我注意到状态从不包括最后一个字符

我做错了什么

---

Rafael

我将输入处理程序替换为

handleInputChange(e) {

    let emailErr = this.validate(e.target.value)
    this.setState({
        ...this.state,
        [e.target.name]: e.target.value,
        emailError: emailErr
    })
}

---

而且它工作得很好

而且，当使用类组件时，您不需要在

setState

调用中传播

this.state

。React合并状态。您只需要在功能组件中执行此操作。