ref value undefined ReactJs

Question

i Used material Design For my login From but when i get console.log in onsubmitForm show ref value undefined... In the following simple example, both this.UserEmail.value & this.UserPassword.value are undefined when the submit is clicked.

  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>
      );
    }
    }

Please take the time to create a working example. You can use codesandbox.io for that. — Dekel
– Dekel, Commented May 3, 2020 at 21:17

Juan Marco · Accepted Answer · 2020-05-04 00:10:34Z

4

The value of the ref is undefined because for Material-UI's API requires that you use inputRef instead of ref to access the input elements inside the nested components.

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>
    );
  }
}

Working example here

edited May 4, 2020 at 0:10

answered May 3, 2020 at 21:29

Juan Marco

3,2512 gold badges31 silver badges35 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Milton Over a year ago

The refs in OPs code are being created correctly. As I found out the OP is not using basic HTML elements, the component element is not the input field itself but a wrapping div for Material UI's TextField component

Juan Marco Over a year ago

Thanks for the clarification Milton. You're right <TextField> is indeed a wrapper component, but the input refs can be accessed using inputRef.

Collectives™ on Stack Overflow

ref value undefined ReactJs

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related