Javascript TypeError:无法读取属性'；价值'；空|反动|

我有两个文本框和一个按钮作为材质UI组件

 </p>
        <TextField id="chatidField" />
        <br />
        <p>
          <code>Enter Your Name:</code>
          <hr />
        </p>
        <TextField id="nameField" />
        <br />
        <br />
        <Button
          variant="contained"
          color="secondary"
          onClick={addToFirebase()}
        >
          Get Your Token
        </Button>

onClick调用的函数如下所示：

  function addToFirebase() {
  var chatid = document.getElementById("chatidField").value;
  var name = document.getElementById("nameField").value;
  console.log(chatid, name);
 }

我不断得到以下错误：

TypeError:无法读取null的属性“值”

8 | var chatid=document.getElementById（“chatiField”）.value

9 | var name=document.getElementById（“nameField”）.value

---

完整代码：

您的

处理程序中有一个错误，它应该是
addToFirebase
而不是
addToFirebase（）
：



包含
（）
时，它将运行
addToFirebase
函数，并将返回值用作
onClick
处理程序。此外，如果
addToFirebase（）
函数是类的一部分，则可能需要使用
this.addToFirebase
。
如果单击
onClick
处理程序时出现错误，则它应该是
addToFirebase
而不是
addToFirebase（）
：



包含
（）
时，它将运行
addToFirebase
函数，并将返回值用作
onClick
处理程序。此外，如果
addToFirebase（）
函数是类的一部分，则可能需要使用
this.addToFirebase
。
传递函数引用，而不是在onick={addToFirebase}中调用函数引用，而不是在onick={addToFirebase}@HemadriDasari中调用它们为空，因为在运行
addToFirebase（）
时，实际的DOM尚未呈现，因此不存在具有这些ID的元素。正确应用onClick函数后，当单击按钮时，这些元素应该确实存在于DOM中，错误应该消失。@HemadriDasari它们为空，因为在运行
addToFirebase（）
时，实际的DOM尚未呈现，因此没有具有这些ID的元素存在。正确应用onClick函数后，当单击按钮时，这些元素应该确实存在于DOM中，错误应该消失。
<Button
      variant="contained"
      color="secondary"
      onClick={addToFirebase}
    >