Question

我有2个文本框和1个按钮作为实质性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（“ chatidField”）。value;

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

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

Answer 1

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

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

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

TypeError：无法读取null的属性“值” reactjs |

1 个答案: