TypeError: Невозможно прочитать свойство 'value' из null |реагировать |

Question

В качестве компонентов пользовательского интерфейса материала у меня есть 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: Невозможно прочитать свойство 'value' из 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.