Reactjs 如何在material ui core 3.9.2中使用InputRef

在材料ui核心3.9.2中
在inputRef={input=>{ 这个输入=输入； }}

错误显示

TypeError:无法设置未定义的属性“input”

如果我们使用this.email而不是this.input

然后错误显示

TypeError:无法设置未定义的属性“email”

这是文本域代码

{
这个输入=el；
}}
或
inputRef={el=>this.email=el；}
margin=“正常”
/>

试试看

---

这是

这个

问题
我通过改变来解决它
来自：

从'@materialui/styles'导入{makeStyles}；
从“react router dom”导入{Link}；
从“@material ui/core/TextField”导入TextField；
从“@material ui/core”导入{按钮，网格}；
从'@material ui/core/colors'导入{red}；
const useStyles=makeStyles({
容器：{
背景：红色，
},
});
导出默认函数Hook（）{
const classes=useStyles（）；
const[values，setValues]=React.useState({
电子邮件：“”，
密码：“”，
});
const handleChange=name=>event=>{
setValues（{…值，[名称]：event.target.value}）；
};
const handleSubmit=事件=>{
event.preventDefault（）；
//警报（此密码）；
控制台日志（“事件”，事件）；
//console.log（“E”，this.email）
//console.log（“p”，这个密码）
//console.log（this.email.value）
//console.log（this.password.value）
};
返回
this.email=el}
onChange={handleChange（'email'）}
margin=“正常”
/>
this.password=el}
onChange={handleChange（'password'）}
margin=“正常”
/>
登录
创建新帐户
忘记密码了？
}

致：

从“React”导入React；
从“react router dom”导入{Link}；
从“@material ui/core/TextField”导入TextField；
从“@material ui/core”导入{按钮，网格}；
类LoginForm扩展了React.Component{
render（）{
const handleSubmit=事件=>{
event.preventDefault（）；
//警报（此密码）；
控制台日志（“事件”，事件）；
//console.log（“E”，this.email）
//console.log（“p”，这个密码）
console.log（this.email.value）
console.log（this.password.value）
};
返回
this.email=el}
margin=“正常”
/>
this.password=el}
margin=“正常”
/>
登录
创建新帐户
忘记密码了？
}
}
导出默认登录信息；

以下是功能组件的解决方案

    import React, { useRef, Component } from 'react'
    import { TextField, Button } from '@material-ui/core'
    import SendIcon from '@material-ui/icons/Send'

    export default function MultilineTextFields() {
    const valueRef = useRef('') //creating a refernce for TextField Component

    const sendValue = () => {
        return console.log(valueRef.current.value) //on clicking button accesing current value of TextField and outputing it to console 
    }

    return (
        <form noValidate autoComplete='off'>
        <div>
            <TextField
            id='outlined-textarea'
            label='Content'
            placeholder='Write your thoughts'
            multiline
            variant='outlined'
            rows={20}
            inputRef={valueRef}   //connecting inputRef property of TextField to the valueRef
            />
            <Button
            variant='contained'
            color='primary'
            size='small'
            endIcon={<SendIcon />}
            onClick={sendValue}
            >
            Send
            </Button>
        </div>
        </form>
    )
    }

import React，{useRef，Component}来自“React”
从“@material ui/core”导入{TextField，Button}”
从“@material ui/icons/Send”导入SendIcon
导出默认函数multiletextfields（）{
const valueRef=useRef（“”）//为TextField组件创建引用
常量sendValue=（）=>{
返回console.log（valueRef.current.value）//单击按钮获取TextField的当前值并将其输出到控制台
}
返回(
发送
)
}

请显示此组件中的其余部分。听起来好像

此

未定义。为了理解原因，我需要查看组件的其余部分。@RyanCogswell非常感谢这是

这个问题

我在使用hook简单的词将普通组件转换为类组件以获取

上下文

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

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;

    import React, { useRef, Component } from 'react'
    import { TextField, Button } from '@material-ui/core'
    import SendIcon from '@material-ui/icons/Send'

    export default function MultilineTextFields() {
    const valueRef = useRef('') //creating a refernce for TextField Component

    const sendValue = () => {
        return console.log(valueRef.current.value) //on clicking button accesing current value of TextField and outputing it to console 
    }

    return (
        <form noValidate autoComplete='off'>
        <div>
            <TextField
            id='outlined-textarea'
            label='Content'
            placeholder='Write your thoughts'
            multiline
            variant='outlined'
            rows={20}
            inputRef={valueRef}   //connecting inputRef property of TextField to the valueRef
            />
            <Button
            variant='contained'
            color='primary'
            size='small'
            endIcon={<SendIcon />}
            onClick={sendValue}
            >
            Send
            </Button>
        </div>
        </form>
    )
    }