如何在反应中以简单条件关闭模态?

Question

我创建了用于注册的模态。除了关闭模态的逻辑外，一切正常。我想要的是为关闭它创造条件。

条件是：如果用户填写了所有字段(姓名、电子邮件等(，并且所有验证都正常，则在"注册"按钮上关闭模式。用户已成功注册。

如果用户未填写所有字段或验证不正常，则单击按钮"注册"不要关闭模式。只有按钮"关闭"应该关闭它。用户未注册。

就是这样。

但是，单击按钮"注册"始终关闭模态，与我写的条件无关。

axios
.post('/api/users', user, config)
.then(res => {
dispatch({ type: 'REGISTER_SUCCESS', payload: res.data })
props.toggle(false)     //close modal if btn 'Sign Up' is clicked, user is successfully registered                
})
.catch(err => {
setErrorMsg(err.response.data)
dispatch({ type: "REGISTER_FAILED" })
props.toggle(true)      //don't close modal if btn 'Sign Up' is clicked, user registration failed
})

下面是代码沙箱： https://codesandbox.io/s/hopeful-star-27wir?file=/src/Register.tsx

Answer 1

toggle((，即 toggleSignUp(( 不接收任何参数，因此 toggle(true( 没有意义。只需评论切换(true(，它就不会关闭。

axios
.post("/api/users", user, config)
.then(res => {
props.toggle(false); //close modal if btn 'Sign Up' is clicked, user is successfully registered
})
.catch(err => {
setErrorMsg(err.response.data);
// COMMENt THIS
//props.toggle(true); //don't close modal if btn 'Sign Up' is clicked, user registration failed
});

或者你可以修复 toggleSignUp(( 来接收参数：

const toggleSignUp = (close:boolean) => {
if(typeof close === 'boolean') {
setModalSignUp(close);
} else {
setModalSignUp(!modalSignUp);
}
}