Reactjs 反应：重置密码使用重置密码链接发送电子邮件以重置密码

我正在尝试创建一个

忘记密码

组件，该组件具有

电子邮件字段

。用户将输入他的电子邮件。现在，该组件应该向输入的电子邮件发送一封

密码重置电子邮件

然后，用户将在其邮件客户端中单击该电子邮件链接，该链接将用户重定向到另一个
密码重置页面
，在该页面中，用户将输入其
电子邮件
，
新密码
，以及
确认密码

我如何做到这一点？到目前为止，我刚刚能够创建一个
忘记密码
页面。不确定，如何进行

我忘记密码的代码
：

import React, { useState } from "react";
import { useHistory } from "react-router-dom";

import { Button, Form, Input, InputGroup, InputGroupAddon } from "reactstrap";

const ResetPassword = () => {
  const [email, setEmail] = useState("");

  const history = useHistory();

  const validateForm = () => {
    return email.length > 0;
  };

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

  return (

      <div className="password-reset">
        <div className="password-reset-form-container">

          <div className="content">
            <Form className="password-reset-form">
              <h3 className="form-title">Password Reset</h3>
              <InputGroup>
                <InputGroupAddon
                  className="input-group-addon"
                  addonType="prepend"
                >
                  <i className="fa fa-user"></i>
                </InputGroupAddon>
                <Input
                  autoFocus
                  type="email"
                  aria-label="Username"
                  aria-describedby="username"
                  aria-invalid="false"
                  placeholder="Email"
                  value={email}
                  onChange={(e) => setEmail(e.target.value)}
                />
              </InputGroup>

              <div className="form-actions">
                <Button
                  className="pull-left"
                  block
                  bssize="small"
                  type="submit"
                  onClick={() => history.push("/")}
                >
                  Cancel
                </Button>

                <Button
                  className="pull-right"
                  block
                  bssize="small"
                  disabled={!validateForm()}
                  type="submit"
                  onSubmit={handleSubmit}
                >
                  Reset
                </Button>
              </div>
            </Form>
          </div>
        </div>

      </div>
    </div>
  );
};

export default ResetPassword;

import React，{useState}来自“React”；
从“react router dom”导入{useHistory}；
从“reactstrap”导入{Button，Form，Input，InputGroup，InputGroupAddon}；
常量重置密码=（）=>{
const[email，setEmail]=useState（“”）；
const history=useHistory（）；
常量validateForm=（）=>{
返回email.length>0；
};
const handleSubmit=（事件）=>{
event.preventDefault（）；
};
返回(
密码重置
setEmail（e.target.value）}
/>
history.push（“/”}
>
取消
重置
);
};
导出默认重置密码；