React JS Error,处理登录表单时无法读取null的属性'value'

我正在尝试使用react create构建一个登录表单,它使用以下json API中的用户名和密码值:https://api.myjson.com/bins/fyufr

代码:

import React, { Component } from 'react';
import ReactDOM from 'react-dom';
import './Login.css';

class Login extends Component { 

    constructor() {
        super();
        this.state = { 
            data: [], 
            userName: "",
            password: "",
            token: "",
        };
    } //end constructor

         change = (e) => {
            this.setState({
                [e.target.name]: e.target.value
            });
        }; //end change

        onSubmit = (e) =>{
            e.preventDefault();
            console.log(this.state);
            this.setState({
                userName: "",
                password: "",
                token: "",
            });

            var userName = document.getElementById('userName').value
            var password = document.getElementById('password').value

            for(var i=0; i < this.state.data.length; i++) {
                if(userName == this.state.data[i].userName && password == this.state.data[i].password){
                    console.log(userName + "is logged in")
                }
            }
                    console.log("incorrect username or password")

        };

     componentWillMount() {
        fetch('https://api.myjson.com/bins/fyufr', {
            method: 'GET',
            headers: {
                'Accept': 'application/json',
                'Content-type': 'application/json',
            },
            /*body: JSON.stringify({
                username: '{userName}',
                password: '{password}'
            })*/
        }) /*end fetch */
        .then(results => results.json()) 
        .then(data => this.setState({ data: data })   
    )

} //end life cycle

    render() {
    console.log(this.state.data);
        return (
            <form>
                <input 
                name="userName"
                placeholder="User Name"
                value={this.state.userName}
                onChange={e => this.change(e) } 
                 />  
<input name="password" type="password" placeholder="Password" value={this.state.password} onChange={e => this.change(e) } />
<input name="token" placeholder="Token" value={this.state.token} onChange={e => this.change(e) } />
<button onClick={e => this.onSubmit(e)}>Submit</button> </form> ); } } export default Login;

我的代码在以下行中出错:var userName = document.getElementById('userName') . value

... this.state.data的值向控制台输出json文件中的值,但是当单击提交按钮时,我得到上面提到的错误 . 我的目标是在输入匹配的用户名和密码时让登录表单将用户引导到登录页面,但首先,我正在尝试解决遇到的错误 . 我是React JS的新手,我能不能得到一些关于我做错的指导?

回答(2)

2 years ago

简单的修复 . 您在表单输入上缺少 id . 你试图得到 document.getElementById('userName').value ,它返回 null ,因为它不存在 .

以下是您的代码的工作示例:https://stackblitz.com/edit/react-m7iwpt

2 years ago

你没有设置我的输入...