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

Question

I'm trying to get an email id, validate it and post it to the server. If the email id exists then the respective account's password can be changed. I used a flag to return the jsx.

if (isEmail in server ) return ( jsx code that has fields to get password (has two input fields))

else return ( jsx code that has fields to get email (has one input field)

Code:

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

Please look into the images so that problem can be understood better

How come the input provided in the first screen is still present in the second screen?

How can I clear the input field?

autocomplete='off

I appreciate any help

Answer 1

Work it out in this way

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;

There are still breakpoints in your application where you need to reset the isEmailValidate key when you press back button. I've commented some of the code which involves mostly the axios request and set the state so that I cound make a demo working to resolve your issue.

Also I'd recommend you you to separate the logic in two different component and handle it with two different route. Use react-router-dom to handle the routing part and react-hook-form to handle the form event.

Here is the working demo of your aplication:

Demo