Reactjs 为什么'；验证eventListener上的输入是否正常工作？

你能帮我让这个沙箱工作吗？ 我错过了一些东西

当密码或登录的长度超过3时，我希望在输入附近看到“GOOD”而不是“FAIL”

以下是链接：

---

谢谢

有一些问题，但它们都来自同一个根状态更新，无法立即进行

问题一是，在调用

setState

之后，无法立即使用更新的状态。这将导致使用上一次渲染中的表单值执行验证逻辑

问题二是，如果您在一行中调用状态更新程序函数两次，它将只使用最后一个值。因此，在验证逻辑中，根据

登录

的值调用一次

setFormError

，根据

密码

的值调用一次。这意味着将永远不会使用由

登录

逻辑确定的值

我已经写了一个例子，说明了几种正确书写的方法

示例一作为每次输入更改时调用的函数：

const{useState}=React；
常量MyInput=（道具）=>{
返回(
);
};
常量示例=（）=>{
const[form，setForm]=useState({
登录名：“，
密码：“
});
常量[formError，setFormError]=useState({
isValidLogin：“失败”，
isValidPassword：“失败”
});
const handleValidateForm=（newForm）=>{
让newValid={…formError}；//使用一个新对象，以便只更新一次状态
如果（newForm.login.length>3）{
newValid.isValidLogin=“好”
}否则{
newValid.isValidLogin=“失败”
}
如果（newForm.password.length>3）{
newValid.isValidPassword=“好”
}否则{
newValid.isValidPassword=“失败”
}
setFormError（newValid）；
};
const onChange=（e）=>{
e、 预防默认值（）；
常量{name，value}=e.target；
const newForm={…form，[name]：value}；//设置为新对象
setForm（newForm）；
handleValidateForm（newForm）；//发送新对象，使其成为最新的
};
返回(
{" "}
{formError.isValidLogin}


{" "}
{formError.isValidPassword}
);
};
ReactDOM.render（，document.getElementById（'root'））
有一些问题，但它们都来自同一个根状态更新，无法立即进行

问题一是，在调用
setState
之后，无法立即使用更新的状态。这将导致使用上一次渲染中的表单值执行验证逻辑

问题二是，如果您在一行中调用状态更新程序函数两次，它将只使用最后一个值。因此，在验证逻辑中，根据
登录
的值调用一次
setFormError
，根据
密码
的值调用一次。这意味着将永远不会使用由
登录
逻辑确定的值

我已经写了一个例子，说明了几种正确书写的方法

示例一作为每次输入更改时调用的函数：
const{useState}=React；
常量MyInput=（道具）=>{
返回(
);
};
常量示例=（）=>{
const[form，setForm]=useState({
登录名：“，
密码：“
});
常量[formError，setFormError]=useState({
isValidLogin：“失败”，
isValidPassword：“失败”
});
const handleValidateForm=（newForm）=>{
让newValid={…formError}；//使用一个新对象，以便只更新一次状态
如果（newForm.login.length>3）{
newValid.isValidLogin=“好”
}否则{
newValid.isValidLogin=“失败”
}
如果（newForm.password.length>3）{
newValid.isValidPassword=“好”
}否则{
newValid.isValidPassword=“失败”
}
setFormError（newValid）；
};
const onChange=（e）=>{
e、 预防默认值（）；
常量{name，value}=e.target；
const newForm={…form，[name]：value}；//设置为新对象
setForm（newForm）；
handleValidateForm（newForm）；//发送新对象，使其成为最新的
};
返回(
{" "}
{formError.isValidLogin}


{" "}
{formError.isValidPassword}
);
};
ReactDOM.render（，document.getElementById（'root'））

相关代码应该在问题中，而不是在场外。除此之外，您使用事件侦听器进行响应输入有点危险。只需将该逻辑放在change handler函数中，它们已经是受控输入。已经尝试过，它不起作用：/相关代码应该在问题中，而不是在场外。除此之外，使用事件侦听器进行响应输入有点危险。只需将该逻辑放在change handler函数中，它们就已经是受控输入。已经尝试过，它不起作用：/