Как InputRef работает в ядре пользовательского интерфейса 3.9.2

Question

In Материал пользовательского интерфейса 3.9.2 On inputRef = {input => {this.input = input;}} Ошибка показывает TypeError: Невозможно установить свойство 'input' из неопределенного

Если мы используем this.email вместо this.input
Тогда отображается ошибка Ошибка типа: Невозможно установить свойство 'email' из неопределенного

Это код TextField

<TextField
            id="login-email"
            label="Email/MobileNo"
            required
            fullWidth
            type="email"
            className={classes.textField}
            inputRef={el => {
              this.input = el;
            }}
            or
            inputRef={el => this.email = el;}
            margin="normal"
        />

Answer 1

Это была this проблема
Я решаю ее, меняя От:

import { makeStyles } from '@material-ui/styles';
import { Link } from "react-router-dom";
import TextField from '@material-ui/core/TextField';
import { Button, Grid } from '@material-ui/core';
import { red } from '@material-ui/core/colors';
const useStyles = makeStyles({
    container: {
        background: red,
    },
});

export default function Hook() {
    const classes = useStyles();
    const [values, setValues] = React.useState({
        email: '',
        password: '',
    });
    const handleChange = name => event => {
        setValues({ ...values, [name]: event.target.value });
    };
    const handleSubmit = event => {
        event.preventDefault();
        // alert(this.password);
        console.log("event ", event);

        // console.log("E ",this.email)
        // console.log("p ",this.password)
        // console.log(this.email.value)
        // console.log(this.password.value)
    };
    return <form className={classes.container} validate="true" onSubmit={handleSubmit} autoComplete="off">
        <TextField
            id="login-email"
            label="Email/MobileNo"
            required
            fullWidth
            type="email"
            inputRef={el => this.email = el}
            onChange={handleChange('email')}
            margin="normal"
        />
        <TextField
            id="login-password"
            label="Password"
            required
            fullWidth
            type="password"
            inputRef={el => this.password = el}
            onChange={handleChange('password')}
            margin="normal"
        />
        <Grid container className="m-y-20" justify="center">
            <Grid item md={5}>
                <Button className="login-submit-btn" type="submit">Login</Button>
                <Link className="t-d-none" to="/">
                    <Button className="login-new-btn">Create New Account</Button>
                </Link>
            </Grid>
            <Grid item md={7}>
                <span className="p-x-15">
                    <Link to="/forgopassword" className="black-clr">
                        Forgot Your Password?
                    </Link>
                </span>
            </Grid>
        </Grid>
    </form>

}

До:

import React from 'react';
import { Link } from "react-router-dom";
import TextField from '@material-ui/core/TextField';
import { Button, Grid } from '@material-ui/core';


class LoginForm extends React.Component {
    render() {
        const handleSubmit = event => {
            event.preventDefault();
            // alert(this.password);
            console.log("event ", event);

            // console.log("E ",this.email)
            // console.log("p ",this.password)
            console.log(this.email.value)
            console.log(this.password.value)
        };
        return <form  validate="true" onSubmit={handleSubmit} autoComplete="off">
            <TextField
                id="login-email"
                label="Email/MobileNo"
                required
                fullWidth
                type="email"
                inputRef={el => this.email = el}
                margin="normal"
            />
            <TextField
                id="login-password"
                label="Password"
                required
                fullWidth
                type="password"
                inputRef={el => this.password = el}
                margin="normal"
            />
            <Grid container className="m-y-20" justify="center">
                <Grid item md={5}>
                    <Button className="login-submit-btn" type="submit">Login</Button>
                    <Link className="t-d-none" to="/">
                        <Button className="login-new-btn">Create New Account</Button>
                    </Link>
                </Grid>
                <Grid item md={7}>
                    <span className="p-x-15">
                        <Link to="/forgopassword" className="black-clr">
                            Forgot Your Password?
                    </Link>
                    </span>
                </Grid>
            </Grid>
        </form>
    }

}
export default LoginForm;

Answer 2

попробуй

<TextField
        id="login-email"
        label="Email/MobileNo"
        required
        fullWidth
        type="email"
        className={classes.textField}
        inputRef={input => this.input = input}
        margin="normal"
    />

с этим ты ничего не возвращаешь

       inputRef={input => {
          this.input = input;
        }}