React 控制形式中的输入值对击键不敏感

Question

输入值似乎没有跟随状态

我将输入值保持在一个状态，但 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 处理程序中注释验证部分时，输入开始正常运行，但我注意到状态从不包括最后一个字符

我做错了什么？

拉斐尔

Answer 1

我将输入处理程序替换为

handleInputChange(e) {

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

效果很好