无法使用React JS中的引用检索材料UI的输入字段

Question

I am developing a Web application using React JS + Material UI core. Now, I am building a form with the material ui control. Now, I am trying to retrieve the input field value (TextField) using refs of React. It is always saying undefined.

This is my component

class CreateEventComponent extends React.Component{

    constructor(props)
    {
        super(props)


    }


    submitCreateEventForm(e)
    {
        e.preventDefault();
        alert(this.refs.name.input.value)
    }

    render()
    {
        return (
            <MuiThemeProvider>
            <div className={scss['page-container']}>
            <Grid
            spacing={16}
            container>
                <Grid item md={12}>
                    <Card>
                    <CardContent>
                        <form onSubmit={this.submitCreateEventForm.bind(this)}>
                        <div>
                            <TextField
                            ref="name"
                            className={scss['form-control']}
                            name="name"
                            label="Name" />
                        </div>

                        <div>
                        <Grid>
                        <Button type="submit" color="primary" variant="raised">Save</Button>
                        </Grid>
                        </div>
                        </form>
                    </CardContent>
                    </Card>
                </Grid>
            </Grid>
            </div>
            </MuiThemeProvider>
        )
    }

}

function mapStateToProps(state)
{
    return {

    };
}

function matchDispatchToProps(dispatch)
{
    return bindActionCreators({

    }, dispatch);
}

const enhance = compose(withWidth(), withStyles(themeStyles, { withTheme: true }), connect(mapStateToProps, matchDispatchToProps))
export default enhance(CreateEventComponent);

As you can see, when form submits, I am trying to alert the name input field using refs. But it is always showing "undefined". I tried using this to fetch the value of TextField.

alert(this.refs.name.value)

It throws error saying name is undefined. So, how can I fetch the value of TextField using Ref?

I used this way as well.

I create ref in the constructor

 constructor(props)
    {
        super(props)

        this.nameRef = React.createRef();
    }

Then set the ref for the TextField

<TextField
                            ref={this.nameRef}
                            className={scss['form-control']}
                            name="name"
                            label="Name" />

Then retrieve the values in this ways.

this.nameRef.value
this.nameRef.input.value

It is giving me the same error as well.

Answer 1

Original Answer

You need to create a ref in your constructor.

From the docs :

class MyComponent extends React.Component {
    constructor(props) {
        super(props);
        this.myRef = React.createRef(); // create a ref
    }

    render() {
        return <div ref={this.myRef} />;
    }
}

Updated Answer

According to Material UI's documentation , you need to pass in a callback to the inputRef prop on your <TextField /> .

So, in addition to the original answer, try this as well:

<TextField
    inputRef={e => this.nameRef = e}
    className={scss['form-control']}
    name="name"
    label="Name" />

Answer 2

For me, this solves the problem:

<TextField
  ref={this.nameRef}
  onChange={e => {
    this.nameRef.current.value = e.target.value;
  }}
  className={scss['form-control']}
  name="name"
  label="Name" />

Answer 3

if you are using a stateless functional component with material ui then you can use react hooks.

import React, { useState, useRef } from "react";

let MyComponent = (props) => {

  let textInput = useRef(null);

  return (
    <div>
      <Button
        onClick={() => {
          setTimeout(() => {
            textInput.current.focus();
            textInput.current.click();
            textInput.current.value="myname";
            console.log(textInput.current.value);
          }, 100);
        }}
      >
        Focus TextField
      </Button>
      <TextField
        fullWidth
        required
        inputRef={textInput}
        name="firstName"
        type="text"
        placeholder="Enter Your First Name"
        label="First Name"
      />
    </div>
  );
};