javascript - TypeError:无法读取null的属性“值” reactjs |

我有2个文本框和1个按钮作为用户界面组件。

 </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（“ chatidField”）。value;
  
  9 | var name = document.getElementById（“ nameField”）。value;


完整代码：https://codesandbox.io/s/pqmrn4x

最佳答案

您的onClick处理程序中有一个错误，应该是addToFirebase而不是addToFirebase()：

<Button
      variant="contained"
      color="secondary"
      onClick={addToFirebase}
    >

当包含()时，它将运行addToFirebase函数，并将返回值用作onClick处理程序。另外，如果addToFirebase()函数是类的一部分，则可能需要使用this.addToFirebase。

关于javascript - TypeError:无法读取null的属性“值” reactjs |，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/53440954/