使用reactjs在html dom中对元素进行条件渲染时，输入字段值不会更改

问题描述 投票：0回答：1

我正在尝试获取电子邮件ID，对其进行验证并将其发布到服务器。如果电子邮件ID存在，则可以更改相应帐户的密码。我使用了一个标志来返回jsx。

如果（在服务器中为isEmail）return（具有用于获取密码的字段（具有两个输入字段）的jsx代码）

其他返回（具有用于获取电子邮件的字段的jsx代码（具有一个输入字段）

代码：

const ForgotPassword = () => {
  const history = useHistory();

  const [Email, setEmail] = useState({
    Email: "",
    isEmail: false,
    isEmailValidate: false,
    Email_msg: ""
  });

  const [Newpassword, setNewpassword] = useState({
    password: "",
    ispassword: false,
    password_msg: ""
  });
  const [NewConfirmpassword, setNewConfirmpassword] = useState({
    confirmpassword: "",
    isconfirmpassword: false,
    confirmpassword_msg: ""
  });

  const validateUserDetails = (value, field) => {
    console.log("value:", value, "field :", field);

    if (field === "Email") {
      if (value.match(/^([\w.%+-]+)@([\w-]+\.)+([\w]{2,})$/i)) {
        setEmail({
          ...Email,
          Email: value,
          isEmailValidate: true,
          Email_msg: ""
        });
        console.log("matched", Email);
      } else
        setEmail({
          ...Email,
          isEmail: false,
          Email_msg: "Enter a valid Email id"
        });
    }

    if (field === "Enter New Password") {
      if (value.match(/^([\w]{6,})/)) {
        setNewpassword({
          ...Newpassword,
          password: value,
          ispassword: true,
          password_msg: ""
        });
      } else {
        setNewpassword({
          ...Newpassword,
          password: value,
          ispassword: false,
          password_msg: "Enter a password greater than 6 characters"
        });
      }
    }

    if (field === "Confirm Password") {
      console.log(value, Newpassword.password, "Passwords");
      if (value === Newpassword.password) {
        // console.log("password matched")
        setNewConfirmpassword({
          ...NewConfirmpassword,
          confirmpassword: value,
          isconfirmpassword: true,
          confirmpassword_msg: ""
        });
      } else {
        setNewConfirmpassword({
          ...NewConfirmpassword,
          confirmpassword_msg: "Enter the password same as above",
          isconfirmpassword: false
        });
      }
    }
  };

  const EmailCheckCall = () => {
    let obj = {};
    obj.email = Email.Email;

    (async () => {
      const rawResponse = await fetch(
        "http://127.0.0.1:8000/api/account/accountcheck",
        {
          method: "POST",
          headers: {
            Accept: "application/json",
            "Content-Type": "application/json"
          },
          body: JSON.stringify(obj)
        }
      );
      const content = await rawResponse.json();
      console.log(content);
      if (content.response === "Account Exists") {
        // history.push('/home/login')
        console.log("Setting isemail true");
        setEmail({
          ...Email,
          isEmail: true
        });
      }
    })();
  };

  const PasswordChangeCall = () => {
    let obj = {};
    obj.email = Email.Email;
    obj.password = NewConfirmpassword.confirmpassword;

    (async () => {
      const rawResponse = await fetch(
        "http://127.0.0.1:8000/api/account/forgotpassword",
        {
          method: "POST",
          headers: {
            Accept: "application/json",
            "Content-Type": "application/json"
          },
          body: JSON.stringify(obj)
        }
      );
      const content = await rawResponse.json();
      // console.log(content);
      if (content.response === "Password Changed") {
        alert("Password Changed Please Login");
        history.push("/home/login");
        // console.log("Password Changed")
      } else {
        setEmail({
          ...Email,
          Email: "",
          isEmail: false
          // isEmailValidate: false,
        });
      }
    })();
  };

  const Onsubmitclick = event => {
    event.preventDefault();
    if (event.target.id === "Next") {
      console.log("place holder : ", event.target.id);
      if (Email.isEmailValidate) {
        console.log("Inside Onsubmit :", Email);
        EmailCheckCall();
      }
    }

    if (event.target.id === "Back") {
      setEmail({
        ...Email,
        Email: "",
        isEmail: false
        // isEmailValidate: false,
      });
    }

    // Send the user details to backend
    if (event.target.id === "submitpassword") {
      PasswordChangeCall();
    }
    console.log(Email, "Email");
    // Send the user details to backend
  };

  if (Email.isEmail)
    return (
      <div className="fpassOuterContainer">
        <h1 className="fpassHeader"> Enter New Password </h1>{" "}
        <form className="fpassFormContainer">
          <input
            className="fpassInput mt-20"
            type="text"
            placeholder="Enter New Password"
            onChange={event =>
              validateUserDetails(event.target.value, event.target.placeholder)
            }
          />{" "}
          <p> {Newpassword.password_msg} </p>
          <input
            className="fpassInput mt-20"
            type="text"
            placeholder="Confirm Password"
            onChange={event =>
              validateUserDetails(event.target.value, event.target.placeholder)
            }
          />{" "}
          <p> {NewConfirmpassword.Confirmpassword_msg} </p>
          <button
            id="Back"
            onClick={event => Onsubmitclick(event)}
            className="fpassBtn-login mt-20 ms-25"
          >
            {" "}
            Back{" "}
          </button>
          <button
            id="submitpassword"
            onClick={event => Onsubmitclick(event)}
            className="fpassBtn-login mt-20 ms-25"
          >
            {" "}
            Submit{" "}
          </button>
        </form>{" "}
      </div>
    );
  else
    return (
      <div className="fpassOuterContainer">
        <h1 className="fpassHeader"> Forgot Password </h1>{" "}
        <form className="fpassFormContainer">
          <input
            className="fpassInput mt-20"
            type="text"
            placeholder="Email"
            onChange={event =>
              validateUserDetails(event.target.value, event.target.placeholder)
            }
          />{" "}
          <p> {Email.Email_msg} </p>
          <button
            id="Next"
            onClick={event => Onsubmitclick(event)}
            className="fpassBtn-login mt-20 ms-25"
          >
            {" "}
            Next{" "}
          </button>
        </form>{" "}
      </div>
    );
};

export default ForgotPassword;

Here the email is typed and next is pressed

After next is pressed on the email entering screen, the password page is rendered, In that first input field is for entering new password and second is for confirm password, But first input field is already filled with the email id that i have entered in previous screen

请仔细观察图像，以便更好地理解问题

为什么在第一屏幕中提供的输入仍然存在于第二屏幕中？

如何清除输入字段？

autocomplete='off

我非常感谢您的帮助

javascript html reactjs
1个回答
0
投票

以这种方式解决

import React, { useState } from "react";

const ForgotPassword = () => {
  // const history = useHistory();

  const [Email, setEmail] = useState({
    Email: "",
    isEmail: false,
    isEmailValidate: false,
    Email_msg: ""
  });

  const [Newpassword, setNewpassword] = useState({
    password: "",
    ispassword: false,
    password_msg: ""
  });
  const [NewConfirmpassword, setNewConfirmpassword] = useState({
    confirmpassword: "",
    isconfirmpassword: false,
    confirmpassword_msg: ""
  });

  const validateUserDetails = (value, field) => {
    if (field === "Email") {
      if (value.match(/^([\w.%+-]+)@([\w-]+\.)+([\w]{2,})$/i)) {
        setEmail({
          ...Email,
          Email: value,
          isEmailValidate: true,
          Email_msg: ""
        });
        console.log("matched", Email);
      } else
        setEmail({
          ...Email,
          Email: value,
          isEmail: false,
          Email_msg: "Enter a valid Email id"
        });
    }

    if (field === "Enter New Password") {
      if (value.match(/^([\w]{6,})/)) {
        setNewpassword({
          ...Newpassword,
          password: value,
          ispassword: true,
          password_msg: ""
        });
      } else {
        setNewpassword({
          ...Newpassword,
          password: value,
          ispassword: false,
          password_msg: "Enter a password greater than 6 characters"
        });
      }
    }

    if (field === "Confirm Password") {
      console.log(value, Newpassword.password, "Passwords");
      if (value === Newpassword.password) {
        // console.log("password matched")
        setNewConfirmpassword({
          ...NewConfirmpassword,
          confirmpassword: value,
          isconfirmpassword: true,
          confirmpassword_msg: ""
        });
      } else {
        setNewConfirmpassword({
          ...NewConfirmpassword,
          confirmpassword_msg: "Enter the password same as above",
          isconfirmpassword: false
        });
      }
    }
  };

  const EmailCheckCall = () => {
    setEmail({
      ...Email,
      isEmail: true
    });
    // let obj = {};
    // obj.email = Email.Email;

    // (async () => {
    //   const rawResponse = await fetch(
    //     "http://127.0.0.1:8000/api/account/accountcheck",
    //     {
    //       method: "POST",
    //       headers: {
    //         Accept: "application/json",
    //         "Content-Type": "application/json"
    //       },
    //       body: JSON.stringify(obj)
    //     }
    //   );
    //   const content = await rawResponse.json();
    //   console.log(content);
    //   if (content.response === "Account Exists") {
    //     // history.push('/home/login')
    //     console.log("Setting isemail true");
    //     setEmail({
    //       ...Email,
    //       isEmail: true
    //     });
    //   }
    // })();
  };

  const PasswordChangeCall = () => {
    let obj = {};
    obj.email = Email.Email;
    obj.password = NewConfirmpassword.confirmpassword;

    (async () => {
      const rawResponse = await fetch(
        "http://127.0.0.1:8000/api/account/forgotpassword",
        {
          method: "POST",
          headers: {
            Accept: "application/json",
            "Content-Type": "application/json"
          },
          body: JSON.stringify(obj)
        }
      );
      const content = await rawResponse.json();
      // console.log(content);
      if (content.response === "Password Changed") {
        alert("Password Changed Please Login");
        // history.push("/home/login");
        // console.log("Password Changed")
      } else {
        setEmail({
          ...Email,
          Email: "",
          isEmail: false
          // isEmailValidate: false,
        });
      }
    })();
  };

  const Onsubmitclick = event => {
    event.preventDefault();
    if (event.target.id === "Next") {
      if (Email.isEmailValidate) {
        console.log("Inside Onsubmit :", Email);
        EmailCheckCall();
      }
    }

    if (event.target.id === "Back") {
      setEmail({
        ...Email,
        Email: "",
        isEmail: false
        // isEmailValidate: false,
      });
    }

    // Send the user details to backend
    if (event.target.id === "submitpassword") {
      PasswordChangeCall();
    }
    console.log(Email, "Email");
    // Send the user details to backend
  };

  if (Email.isEmail)
    return (
      <div className="fpassOuterContainer">
        <h1 className="fpassHeader"> Enter New Password </h1>{" "}
        <form className="fpassFormContainer">
          <input
            className="fpassInput mt-20"
            type="text"
            value={Newpassword.password}
            placeholder="Enter New Password"
            onChange={event =>
              validateUserDetails(event.target.value, event.target.placeholder)
            }
          />{" "}
          <p> {Newpassword.password_msg} </p>
          <input
            className="fpassInput mt-20"
            type="text"
            placeholder="Confirm Password"
            onChange={event =>
              validateUserDetails(event.target.value, event.target.placeholder)
            }
          />{" "}
          <p> {NewConfirmpassword.Confirmpassword_msg} </p>
          <button
            id="Back"
            onClick={event => Onsubmitclick(event)}
            className="fpassBtn-login mt-20 ms-25"
          >
            {" "}
            Back{" "}
          </button>
          <button
            id="submitpassword"
            onClick={event => Onsubmitclick(event)}
            className="fpassBtn-login mt-20 ms-25"
          >
            {" "}
            Submit{" "}
          </button>
        </form>{" "}
      </div>
    );
  else
    return (
      <div className="fpassOuterContainer">
        <h1 className="fpassHeader"> Forgot Password </h1>{" "}
        <form className="fpassFormContainer">
          <input
            className="fpassInput mt-20"
            type="text"
            placeholder="Email"
            value={Email.Email}
            onChange={event => {
              validateUserDetails(event.target.value, event.target.placeholder);
            }}
          />{" "}
          <p> {Email.Email_msg} </p>
          <button
            id="Next"
            onClick={event => Onsubmitclick(event)}
            className="fpassBtn-login mt-20 ms-25"
          >
            {" "}
            Next{" "}
          </button>
        </form>{" "}
      </div>
    );
};

export default ForgotPassword;

您的应用程序中仍然存在断点，当您按返回按钮时，需要重新设置isEmailValidate键。我已经评论了一些代码，这些代码主要涉及axios请求并设置了状态，以便我进行演示以解决您的问题。

另外，我建议您将逻辑分为两个不同的组件，并使用两个不同的路径进行处理。使用react-router-dom处理路由部分，并使用react-hook-form处理form事件。

这是您的应用程序的工作演示：

Demo

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.