diff --git a/web/src/ResetModal.js b/web/src/ResetModal.js
index 794f8c4e..4ca43f50 100644
--- a/web/src/ResetModal.js
+++ b/web/src/ResetModal.js
@@ -23,6 +23,8 @@ export const ResetModal = (props) => {
   const [confirmLoading, setConfirmLoading] = React.useState(false);
   const [sendButtonText, setSendButtonText] = React.useState(i18next.t("user:Send Code"));
   const [sendCodeCoolDown, setCoolDown] = React.useState(false);
+  const [dest, setDest] = React.useState("");
+  const [code, setCode] = React.useState("");
   const {buttonText, destType, coolDownTime} = props;
 
   const showModal = () => {
@@ -34,8 +36,6 @@ export const ResetModal = (props) => {
   };
 
   const handleOk = () => {
-    let dest = document.getElementById("dest").value;
-    let code = document.getElementById("code").value;
     if (dest === "") {
       Setting.showMessage("error", i18next.t("user:Empty " + destType));
       return;
@@ -68,7 +68,6 @@ export const ResetModal = (props) => {
 
   const sendCode = () => {
     if (sendCodeCoolDown) return;
-    let dest = document.getElementById("dest").value;
     if (dest === "") {
       Setting.showMessage("error", i18next.t("user:Empty " + destType));
       return;
@@ -105,13 +104,13 @@ export const ResetModal = (props) => {
       >
         <Col style={{margin: "0px auto 40px auto", width: 1000, height: 300}}>
           <Row style={{width: "100%", marginBottom: "20px"}}>
-            <Input addonBefore={i18next.t("user:New " + destType)} id="dest" placeholder={placeHolder}
-                            addonAfter={<button style={{width: "90px", border: "none", backgroundColor: "#fff"}} onClick={sendCode}>{" " + sendButtonText + " "}</button>}
+            <Input addonBefore={i18next.t("user:New " + destType)} placeholder={placeHolder} onChange={(e) => setDest(e.target.value)}
+                   addonAfter={<button style={{width: "90px", border: "none", backgroundColor: "#fafafa"}} onClick={sendCode}>{" " + sendButtonText + " "}</button>}
             />
 
           </Row>
           <Row style={{width: "100%", marginBottom: "20px"}}>
-            <Input addonBefore={i18next.t("user:Code You Received")} placeholder={i18next.t("user:Enter your code")} id="code"/>
+            <Input addonBefore={i18next.t("user:Code You Received")} placeholder={i18next.t("user:Enter your code")} onChange={(e) => setCode(e.target.value)}/>
           </Row>
         </Col>
       </Modal>