In Material ui core 3.9.2
On inputRef={input => {
this.input = input;
}}
Error Shows
TypeError: Cannot set property 'input' of undefined
If we use this.email instead of this.input
Then Error Shows
TypeError: Cannot set property 'email' of undefined
This is TextField Code
<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"
/>
Here is solution for functional component.
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>
)
}
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With