无法在React项目中读取未定义的属性“值”？

Question

Im try to create an Login using react js and firebase. When I try to compile this it gives an error like below

TypeError: Cannot read property 'value' of undefined

It's that I'm try to display user inputs in console.

My Login.jsx file like below

import React, { Component } from 'react';

class Login extends Component {

    constructor(props){
        super(props);
        this.authWithEmailPassword = this.authWithEmailPassword.bind(this);
    }

    authWithEmailPassword(event) {
        event.preventDefault();
        console.log("authed with email");
        console.table([{
            email: this.emailInput.value,
            password: this.passwordInput.value
        }])
    }

    render(){
        return(
            <div style={loginStyle}>
                <hr style={{marginTop: "10px", marginBottom: "10px"}} />
                <form onSubmit={(event)=> {this.authWithEmailPassword(event) }}
                ref={(form) => { this.loginForm = form }}>
                    <div style={{ marginBottom: "10px" }} className="pt-callout pt-icon-info-sign">
                        <h5>Note</h5>
                        If you dont have an account, this form will create your account 
                    </div>
                    <label className="pt-label">
                        Email
                        <input style={{width: "100%"}} className="pt-input" name="email" type="email"
                        ref="{(input) => {this.emailInput=input}}" placeholder="Email"/>
                    </label>

                    <label className="pt-label">
                        Password
                        <input style={{width: "100%"}} className="pt-input" name="password" type="password"
                        ref="{(input) => {this.passwordInput=input}}" placeholder="Password"/>
                    </label>
                    <input type="submit" style={{width: "100%"}} className="pt-button pt-intent-primary" value="Login"/>
                </form>
            </div>
        );
    }
}

export default Login;

What did I do wrong Please help me in this matter Im still a newbie. How can I fix this

Answer 1

Remove double quotes in ref variable. It should be

ref={(input) => {this.passwordInput = input}}

Answer 2

Change your refs ref={(input) => this.emailInput = input}

ref={(input) => this.passwordInput = input}

below is the demo code with your code

demo with your code

For better use cases, use state or props over ref to fetch form data

reference : use-state-or-refs-in-react-js-form-components

Answer 3

change your code with this

<input style={{width: "100%"}} className="pt-input" name="email" type="email"ref="{(input) => this.emailInput=input}" placeholder="Email"/>

<input style={{width: "100%"}} className="pt-input" name="password" type="password" ref="{(input) => this.passwordInput=input}" placeholder="Password"/>