Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to InputRef works in material ui core 3.9.2

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"
        />
like image 609
Talha Rahman Avatar asked Oct 16 '25 03:10

Talha Rahman


1 Answers

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>
    )
    }
like image 163
Rajneesh Yadu Avatar answered Oct 18 '25 01:10

Rajneesh Yadu



Donate For Us

If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!