Javascript REACT无法读取属性'；价值'；onKeyPress处的空值_Javascript_Reactjs

Javascript REACT无法读取属性'；价值'；onKeyPress处的空值

javascript reactjs

Javascript REACT无法读取属性'；价值'；onKeyPress处的空值,javascript,reactjs,Javascript,Reactjs,我有一个名为EmailSubscribe的react组件，它获取文本输入框的值，并通过一个获取请求发送它。我已将两个元素保存到变量emailInput和emailContainer中，但是，我收到以下错误消息： Uncaught TypeError: Cannot read property 'value' of null at onKeyPress 我在其他组件上没有遇到过这个问题，如果每次需要时都用document.querySelector（'XXXX'）替换emailInput

我有一个名为EmailSubscribe的react组件，它获取文本输入框的值，并通过一个获取请求发送它。我已将两个元素保存到变量emailInput和emailContainer中，但是，我收到以下错误消息：

Uncaught TypeError: Cannot read property 'value' of null
    at onKeyPress

我在其他组件上没有遇到过这个问题，如果每次需要时都用document.querySelector（'XXXX'）替换emailInput和emailContainer，我的代码就会工作，但这不是一种干净的方法。知道我为什么会收到这个错误消息吗

App.js：

import ResultsPage from "./pages/ResultsPage/results";
import Header from "./components/Header";
import EmailSubscribe from "./components/EmailSubscribe";

function App() {
  return (
    <div className="App">
      <Header />
      <ResultsPage />
      <EmailSubscribe />
    </div>
  );
}

export default App;

function EmailSubscribe() {
  const emailContainer = document.querySelector(".email-container");
  const emailInput = document.querySelector(".email-input");

  const isValidEmail = (email) => {
    var validEmailRegex = /\w+([-+.']\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*/;
    return validEmailRegex.test(email);
  };

  const resetEmailSubscribe = (newValue, newPlaceholder, isErrorMessage) => {
    emailInput.value = newValue;
    emailInput.placeholder = newPlaceholder;
    if (isErrorMessage) {
      emailInput.classList.add("placeholderColorOrange");
    } else {
      emailInput.classList.remove("placeholderColorOrange");
    }
  };

  const emailSubscribePOST = (email) => {
    if (email.trim() == "") {
      resetEmailSubscribe("", "Please enter your email address", true);
    } else if (!isValidEmail(email)) {
      resetEmailSubscribe("", "Invalid email address", true);
    } else {
      fetch("http://127.0.0.1:5000/subscribe", {
        method: "POST",
        headers: {
          "Content-Type": "application/json",
          Accept: "application/json",
        },
        body: JSON.stringify({ email: email }),
      })
        .then((res) => res.json())
        .then((res) => {
          if (res.message == "Email sent successfully") {
            emailContainer.innerHTML =
              "<p class='email-thankyou'>Thank you for subscribing!</p>";
          } else if (res.message == "Email already registered") {
            resetEmailSubscribe("", res.message, true);
          }
        });
    }
  };

  return (
    <div class="email-container">
      <input
        type="text"
        className="email-input"
        placeholder="Register or log in"
        onKeyPress={(e) =>
          e.key === "Enter" && emailSubscribePOST(emailInput.value)
        }
      />
      <button
        type="button"
        className="email-submit-btn btn"
        onClick={() => {
          emailSubscribePOST(emailInput.value);
        }}
      >
        Submit
      </button>
    </div>
  );
}

export default EmailSubscribe;

从“/pages/ResultsPage/results”导入ResultsPage；
从“/components/Header”导入标题；
从“/components/EmailSubscribe”导入EmailSubscribe；
函数App（）{
返回(
);
}
导出默认应用程序；

EmailSubscribe.jsx：

import ResultsPage from "./pages/ResultsPage/results";
import Header from "./components/Header";
import EmailSubscribe from "./components/EmailSubscribe";

function App() {
  return (
    <div className="App">
      <Header />
      <ResultsPage />
      <EmailSubscribe />
    </div>
  );
}

export default App;

function EmailSubscribe() {
  const emailContainer = document.querySelector(".email-container");
  const emailInput = document.querySelector(".email-input");

  const isValidEmail = (email) => {
    var validEmailRegex = /\w+([-+.']\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*/;
    return validEmailRegex.test(email);
  };

  const resetEmailSubscribe = (newValue, newPlaceholder, isErrorMessage) => {
    emailInput.value = newValue;
    emailInput.placeholder = newPlaceholder;
    if (isErrorMessage) {
      emailInput.classList.add("placeholderColorOrange");
    } else {
      emailInput.classList.remove("placeholderColorOrange");
    }
  };

  const emailSubscribePOST = (email) => {
    if (email.trim() == "") {
      resetEmailSubscribe("", "Please enter your email address", true);
    } else if (!isValidEmail(email)) {
      resetEmailSubscribe("", "Invalid email address", true);
    } else {
      fetch("http://127.0.0.1:5000/subscribe", {
        method: "POST",
        headers: {
          "Content-Type": "application/json",
          Accept: "application/json",
        },
        body: JSON.stringify({ email: email }),
      })
        .then((res) => res.json())
        .then((res) => {
          if (res.message == "Email sent successfully") {
            emailContainer.innerHTML =
              "<p class='email-thankyou'>Thank you for subscribing!</p>";
          } else if (res.message == "Email already registered") {
            resetEmailSubscribe("", res.message, true);
          }
        });
    }
  };

  return (
    <div class="email-container">
      <input
        type="text"
        className="email-input"
        placeholder="Register or log in"
        onKeyPress={(e) =>
          e.key === "Enter" && emailSubscribePOST(emailInput.value)
        }
      />
      <button
        type="button"
        className="email-submit-btn btn"
        onClick={() => {
          emailSubscribePOST(emailInput.value);
        }}
      >
        Submit
      </button>
    </div>
  );
}

export default EmailSubscribe;

函数EmailSubscribe（）{
const emailContainer=document.querySelector（“.email container”）；
const emailInput=document.querySelector（“.email输入”）；
const isValidEmail=（电子邮件）=>{
var validEmailRegex=/\w+（[-+.]\w+*@\w+（[-.]\w+*\.\w+）（[-.]\w+*/；
返回ValidMailregex.test（电子邮件）；
};
const resetEmailSubscribe=（newValue、newPlaceholder、iErrorMessage）=>{
emailInput.value=newValue；
emailInput.placeholder=newPlaceholder；
如果（iErrorMessage）{
emailInput.classList.add（“占位符颜色橙色”）；
}否则{
emailInput.classList.remove（“占位符颜色橙色”）；
}
};
const emailsubscribebepost=（电子邮件）=>{
如果（email.trim（）==“”）{
resetEmailSubscribe（“，“请输入您的电子邮件地址”，true）；
}如果（！isValidEmail（电子邮件））{
resetEmailSubscribe（“，”无效电子邮件地址“，true）；
}否则{
取回（“http://127.0.0.1:5000/subscribe", {
方法：“张贴”，
标题：{
“内容类型”：“应用程序/json”，
接受：“应用程序/json”，
},
正文：JSON.stringify（{email:email}），
})
.然后（（res）=>res.json（））
。然后（（res）=>{
如果（res.message==“成功发送电子邮件”）{
emailContainer.innerHTML=
“感谢您的订阅！”；
}else if（res.message==“电子邮件已注册”）{
resetEmailSubscribe（“”，res.message，true）；
}
});
}
};
返回(
e、 key==“Enter”&&emailsubscribebepost（emailInput.value）
}
/>
{
emailSubscribePOST（emailInput.value）；
}}
>
提交
);
}
导出默认电子邮件订阅；

通常，不要使用文档访问项目。获取。。。在反应中。在React中，你对自己正在做的事情有一种状态

function EmailSubscribe() {
  const [input, setInput] = useState("");
  const [placeholder, setPlaceholder] = useState("Register or log in");
  const [hasSubscribed, setHasSubscribed] = useState(false);
  const [hasErrorMessage, setHasErrorMessage] = useState(false);

  const isValidEmail = (email) => {
    var validEmailRegex = /\w+([-+.']\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*/;
    return validEmailRegex.test(email);
  };

  const resetEmailSubscribe = (newValue, newPlaceholder, hasErrorMessage) => {
    setInput(newValue);
    setPlaceholder(newPlaceholder);
    setHasErrorMessage(hasErrorMessage);
  };

  const emailSubscribePOST = (email) => {
    if (email.trim() == "") {
      resetEmailSubscribe("", "Please enter your email address", true);
    } else if (!isValidEmail(email)) {
      resetEmailSubscribe("", "Invalid email address", true);
    } else {
      fetch("http://127.0.0.1:5000/subscribe", {
        method: "POST",
        headers: {
          "Content-Type": "application/json",
          Accept: "application/json",
        },
        body: JSON.stringify({ email: email }),
      })
        .then((res) => res.json())
        .then((res) => {
          if (res.message == "Email sent successfully") {
            setHasSubscribed(true)
          } else if (res.message == "Email already registered") {
            resetEmailSubscribe("", res.message, true);
          }
        });
    }
  };

  return (
    <div class="email-container">
      {hasSubscribed ? 
        <p class='email-thankyou'>Thank you for subscribing!</p>
        :
        <input
          type="text"
          className={hasErrorMessage ? "placeholderColorOrange" : ""}
          placeholder={emailInputPlaceholder}
          onChange={e => setInput(e.target.value)}
          value={input}
          onKeyPress={(e) =>
            e.key === "Enter" && emailSubscribePOST(input)
          }
        />
        <button
          type="button"
          className="email-submit-btn btn"
          onClick={() => {
            emailSubscribePOST(input);
          }}
        >
        Submit
        </button>
      }
    </div>
  );
}

export default EmailSubscribe;

函数EmailSubscribe（）{
const[input，setInput]=useState（“”）；
const[placeholder，setPlaceholder]=useState（“注册或登录”）；
常量[hasSubscribed，setHasSubscribed]=useState（false）；
const[hasErrorMessage，setHasErrorMessage]=useState（false）；
const isValidEmail=（电子邮件）=>{
var validEmailRegex=/\w+（[-+.]\w+*@\w+（[-.]\w+*\.\w+）（[-.]\w+*/；
返回ValidMailregex.test（电子邮件）；
};
const resetEmailSubscribe=（newValue、newPlaceholder、hasErrorMessage）=>{
设置输入（新值）；
setPlaceholder（newPlaceholder）；
setHasErrorMessage（hasErrorMessage）；
};
const emailsubscribebepost=（电子邮件）=>{
如果（email.trim（）==“”）{
resetEmailSubscribe（“，“请输入您的电子邮件地址”，true）；
}如果（！isValidEmail（电子邮件））{
resetEmailSubscribe（“，”无效电子邮件地址“，true）；
}否则{
取回（“http://127.0.0.1:5000/subscribe", {
方法：“张贴”，
标题：{
“内容类型”：“应用程序/json”，
接受：“应用程序/json”，
},
正文：JSON.stringify（{email:email}），
})
.然后（（res）=>res.json（））
。然后（（res）=>{
如果（res.message==“成功发送电子邮件”）{
setHasSubscribed（真）
}else if（res.message==“电子邮件已注册”）{
resetEmailSubscribe（“”，res.message，true）；
}
});
}
};
返回(
{有人订阅了吗？
感谢您的订阅
:
setInput（e.target.value）}
值={input}
onKeyPress={（e）=>
e、 key==“输入”&&emailsubscribebepost（输入）
}
/>
{
emailSubscribePOST（输入）；
}}
>
提交
}
);
}
导出默认电子邮件订阅；

这里的主要问题是您的输入文本框中没有value属性。请尝试将“value”属性添加到输入文本中，并使用onChange设置状态，如下所示：

<input
        type="text"
        className="email-input"
        placeholder="Register or log in"
        value={emailInput}
        onChange={(e)=>setEmailInput(e.value)
        onKeyPress={(e) =>
          e.key === "Enter" && emailSubscribePOST(emailInput)
        }
      />
      <button
        type="button"
        className="email-submit-btn btn"
        onClick={() => {
          emailSubscribePOST(emailInput);
        }}
      >

setEmailInput（e.value）
onKeyPress={（e）=>
e、 键==“输入”&&emailSubscribePOST（emailInput）
}
/>
{
emailSubscribePOST（emailInput）；
}}
>

它应该可以工作。

在调用document.querySelector（“.email input”）时，组件还没有装入，甚至没有呈现，因此它将返回null。请注意，React的整个理念不是直接接触DOM，而是使用它们提供的api（即React挂钩）以与React生命周期集成的方式管理应用程序的状态。通过这种方式，react会处理与DOM相关的所有事情，您不必太担心它何时真正可以被访问。感谢您的输入，这是一个很好的上下文！这真的很有帮助，谢谢！但是，我现在无法在输入框中键入？我不太确定如何从输入框中更新输入状态，我添加了onChange={（e）=>setEmailInputValue（e.target.value）}，它工作得很好，非常感谢您的帮助！哦，是的，我忘了，我要编辑它。这个