значение ссылки не определено ReactJs

Question

Я использовал дизайн материала. Для моего входа с, но когда я получаю console.log в onsubmitForm, показываем значение ref undefined ... В следующем простом примере оба this.UserEmail.value и this.UserPassword.value не определены, когда отправка нажата.

  export default class SignIn extends React.Component {
      UserEmail= null;
      UserPassword=null;

      onsubmitForm = (e) =>
      {
        e.preventDefault();
        let EmailData = this.UserEmail.value;
        let PassData = this.UserPassword.value;
        let data = {EmailData,PassData}
        console.log("this is the submit form function");
        console.log(data);  // I Get Data Obj Undefined
      }

      render(){
      return (
         <div>
            <form>
              <TextField
                variant="outlined"
                margin="normal"
                required
                ref={el => this.UserEmail = el}
                id="email"
                label="Email"
                name="email"
                autoComplete="email"
                autoFocus
              />
              <TextField
                variant="outlined"
                margin="normal"
                fullWidth
                ref={el => this.UserPassword = el}
                name="password"
                label="Password"
                type="password"
                id="password"
                autoComplete="current-password"
              />

              <Button
                type="submit"
                onClick={this.onsubmitForm}
                variant="contained"
                color="primary"
              >
                Login
              </Button>
            </form>
          </div>
      );
    }
    }

Answer 1

Значение ссылки равно undefined, поскольку для API-интерфейсу Material-UI требуется, чтобы вы использовали inputRef вместо ref для доступа к элементам input внутри вложенных компонентов.

export default class SignIn extends React.Component {
  onsubmitForm = e => {
    e.preventDefault();
    const email = this.email.value;
    const password = this.password.value;

    let data = { email, password };
    console.log("this is the submit form function");
    console.log(data);
  };

  render() {
    return (
      <div>
        <form>
          <TextField
            variant="outlined"
            margin="normal"
            required
            inputRef={email => (this.email = email)}
            id="email"
            label="Email"
            name="email"
            autoComplete="email"
            autoFocus
          />
          <TextField
            variant="outlined"
            margin="normal"
            fullWidth
            inputRef={password => (this.password = password)}
            name="password"
            label="Password"
            type="password"
            id="password"
            autoComplete="current-password"
          />
          <Button
            type="submit"
            onClick={this.onsubmitForm}
            variant="contained"
            color="primary"
          >
            Login
          </Button>
        </form>
      </div>
    );
  }
}

Рабочий пример здесь