时间戳

首页 > 解决方案 > 使用钩子处理/删除组件

javascript - 使用钩子处理/删除组件

问题描述

我正在编写一个用于注册新用户的表单，我希望当registerNewUser（POST 方法）返回 200 状态时，它还应该处理/删除表单方法并公开一个新组件，说“谢谢”之类的。

1. 我的表单组件在获得 200 状态时如何处理？
2. 我怎样才能让一个新组件出现？

返回

 return (
    <form onSubmit={handleSubmit} className="registerAccountContainer">
            <input type="email"     placeholder="Email"     required onChange={handleChange('email')}/>
            <input type="password"  placeholder="Password"  required onChange={handleChange('password')}/>   
        <button type="submit"> Register Account </button>
    </form>
    )

处理提交

     const handleSubmit = event => {
        registerNewUser(user);
        event.preventDefault();
     }

注册新用户

      export const registerNewUser = (user) => { Axios.post('http://localhost:8080/register', user)
      .then(function (response) {
        return alert("We've sent you mail! Please confirm your user.");
       /* THIS IS WHERE I WANT IT TO DISPOSE THE FORM COMPONENT AND
          REPLACE IT WITH A NEW SIMPLE <P>'THANK YOU'</P> */
       })
       .catch(function (error) {
         return alert(error);
       });
     }

任何关于我如何解决这个问题的建议都非常感谢。

标签： javascriptcssreactjs

解决方案

您需要在本地状态中声明一个新变量并在用户注册时更改它

state = { registered : false }

export const registerNewUser = (user) => { Axios.post('http://localhost:8080/register', user)
  .then(function (response) {
    this.setState({registered: true})
    return alert("We've sent you mail! Please confirm your user.");
   })
   .catch(function (error) {
     return alert(error);
   });
 }

并检查状态是否已更改，您将更改标签

return ({this.state.registered ? <p>'THANK YOU'</p> :
<form onSubmit={handleSubmit} className="registerAccountContainer">
        <input type="email"     placeholder="Email"     required onChange={handleChange('email')}/>
        <input type="password"  placeholder="Password"  required onChange={handleChange('password')}/>   
    <button type="submit"> Register Account </button>
</form>}
)

推荐阅读