1

输入值似乎没有遵循状态

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

我究竟做错了什么？

拉斐尔

4

1 回答 1

1

我将输入处理程序替换为

handleInputChange(e) {

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

它工作得很好

于 2021-02-17T23:38:09.110 回答