无法获取材质 UI 文本字段数据

Question

I'm quite a newbie with React. I made a login page using firebase auth and have any input field to get the person's contact to validate but I can't get this data. Already tried everything I found here but it is not working.

I tried the ref={x => this.contacto = x} as shown below but not working.

export class Login extends Component {
  handleClick=()=>{
        const recaptcha = new firebase.auth.RecaptchaVerifier('recaptcha');
        const number = this.contacto.value;
        console.log(number)
        firebase.auth().signInWithPhoneNumber(number, recaptcha).then( function(e) {
          var code = prompt('Enter the otp', '');
    
            
            if(code === null) return;
    
            
            e.confirm(code).then(function (result) {
                console.log(result.user);
    
                document.querySelector('label').textContent +=   result.user.phoneNumber + "Number verified";
                
            }).catch(function (error) {
                console.error( error);
                
            });
    
        })
        .catch(function (error) {
            console.error( error);
    
        });
      }
render(){
  return (
    <div>
        <div id="recaptcha"></div>
      <Grid container justify="center">
        <Grid item component={Card} xs={6} md={3} className={cx(styles.card)}>
          <CardContent>
            <img className={styles.image} src={image} alt="cmcq" />
            <Typography variant="h6" className={cx(styles.titulo)} gutterBottom>
             Login
            </Typography>
            <TextField
              id="outlined-primary"
              label="Insert phone number" 
              variant="outlined"
              color="primary"
              size="small"
              ref={x => this.contacto = x}
              className={cx(styles.field)}
            /> 
            <Button variant="contained" color="primary" className={cx(styles.button)} onClick={this.handleClick} >
              Entrar
            </Button> 
          </CardContent>
        </Grid>
      </Grid>
    </div>
  );
}
};

export default Login;

Answer 1

Try using the onChange handler for TextField to set a state variable. You can reference it with this.state.varName

onTextChange = (event) => {
  this.setState({varName: event.target.value});
}

<TextField
  id="outlined-primary"
  label="Insert phone number" 
  variant="outlined"
  color="primary"
  size="small"
  onChange={this.onTextChange}
  className={cx(styles.field)}
/>

Answer 2

You shouldn't use ref to access data of TextField , you should use onChange callback method to access data, try:

<TextField
  onChange={e => console.log(e)}
/>

The logged e contains your expected data. For using ReactJS mindset you should use state and add it to the state and then access to it.