Question

我正在尝试创建注册页面，我想在注册帐户后进行otp验证。就像这些天的大多数注册一样，在某个地方创建帐户后，您会得到一个激活链接，当您单击链接时，您的帐户也会被激活，因此我也希望在我的注册页面中使用otp。

我希望我的注册像在创建帐户后一样，如果api发送“ verifyemail”作为响应，那么我们将被重定向到otp验证页面，但是我不确定如何执行该操作。 otp页面知道输入的otp是用于我们刚刚用来在我的网站中创建帐户的电子邮件。我们是否应该在registration.js文件中的元素中以电子邮件的形式发送电子邮件，例如

else if (response.data === "verifyemail") {
      return <Redirect to="/verifyOtp" email={this.state.email}/ />;
}

还是我做错了？

这是otp验证页面

import React, { Component } from "react";
import { Redirect } from "react-router-dom";
class VerifyOTP extends Component {
  constructor(props) {
    super(props);
    this.state = {
      otp: ""
    };
    this.onchange = this.onchange.bind(this);
  }
  onchange(e) {
    this.setState({ [e.target.name]: e.target.value });
  }
  performVerify = async event => {
    event.preventDefault();

    var data = {
      emailid: this.props.email,
      otp: this.state.registrationotp
    };
    const options = {
      method: "POST",
      headers: {
        "Content-Type": "application/json",
        Accept: "application/json"
      },
      body: JSON.stringify(data)
    };
    const url = "/api/verifyemail";
    try {
      const response = await fetch(url, options);
      const result = await response.json();
      console.log(result);
      if (result.data === "verified") {
        return <Redirect to="/dashboard/" />;
      }
    } catch (error) {
      console.error(error);
    }
  };

  render() {
    return (
      <div>
        <input
          type="text"
          name="otp"
          placeholder="emnter otp"
          onChange={this.onchange}
        />
        <br />
        <button type="submit" onClick={event => this.performVerify(event)}>
          Submit
        </button>
        <hr />
      </div>
    );
  }
}
export default VerifyOTP;

我试图将这段代码从angularjs代码转换为reactjs代码，就像以前在angularjs上制作的

  $scope.register=function(){
        $scope.newuser={
            'username':$scope.name,
            'password':$scope.password,
            'email':$scope.emailid
        }
           return $http.post('/api/register',$scope.newuser).then(function(response,status){
           if(response.data=='redirect'){
               $window.location.href="/home";                        
           }else if(response.data=='verifyemail'){
            angular.element(document.querySelector('#verifyemailbtn')).click();                            
           }else {
            window.alert(response.data);
           }
           });
        }

    });
 $scope.verifyemailotp=function(){
        $http.post('/api/verifyemail',{'emailid':$scope.emailid,'otp':$scope.registrationotp}).then(function(response,status){
            if(response.data=='verified'){
                $window.location.href="/home";                                        
            }
        });
        }

我想知道直到我所做的一切正确与否？如果有任何错误，请告诉我我哪里错了。整个代码也都放在了codesandbox上

https://codesandbox.io/s/beautiful-shirley-nn235

Answer 1

这是您做错的事情：

对于react-router，我们不使用Redirect可以在渲染中使用的组件。对于以编程方式更改路线，我们必须根据需要使用history.push或history.replace。

所以替换

<Redirect
    to={{
        pathname: "/verifyOtp",
        state: { email: "this.state.email" }
    }}
/>

使用

this.props.history.push("/verifyOtp", { email: this.state.email });

当您将某些内容传递给状态时，可以通过params访问b / w state和props.location.state状态，并且如果您想更改路由参数，则必须通过仅以location.push('/verifyOtp?email=test')这样的方式进行路由，我们必须使用props.match.params.email进行访问。

这是更新的沙箱https://codesandbox.io/s/jolly-turing-inx3w

其他建议：

请勿使用var，请使用const，let

没有差异onClick={event => this.performLogin(event)}和onClick={this.performLogin}，您可以否定不需要的功能

使用reactjs进行电子邮件otp验证

1 个答案: