2
votes

Comment InputRef fonctionne dans le noyau de l'interface matérielle 3.9.2

Dans Material ui core 3.9.2
Sur inputRef = {input => { this.input = entrée; }}

Erreurs affichées

TypeError: Impossible de définir la propriété 'input' d'undefined

Si nous utilisons this.email au lieu de this.input

Puis une erreur s'affiche

TypeError: Impossible de définir la propriété 'email' non définie

Ceci est le code 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"
        />

reactjs textfield material-ui input ref

3 commentaires

Veuillez montrer le reste du composant dans lequel il se trouve.

Il semble que ce n’est pas défini. Pour comprendre pourquoi, j'aurais besoin de voir le reste du composant.

@RyanCogswell Merci beaucoup c'était ce problème que j'utilisais des hooks

3 Réponses :

0
votes

essayez

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

avec ceci vous ne renvoyez rien

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

0 commentaires

2
votes

C'était ce problème
Je le résous en changeant
De:

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 { 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>

}

1 commentaires

en termes simples, convertir un composant normal en composant de classe pour obtenir le contexte

1
votes

Voici la solution pour le composant fonctionnel.

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

0 commentaires