错误编译失败未定义no-undef答案

【问题标题】：error failed to compile not defined no-undef错误编译失败未定义no-undef
【发布时间】：2018-04-28 14:27:03
【问题描述】：

正在开发一个登录表单，它将接受来自以下 API 的值：https://api.myjson.com/bins/11unjr

...目前，密码字段为空白，因此可以接受任何密码。我收到错误：无法编译 'userName' is not defined no-undef; 'pwd' 未定义为 no-undef。

代码：

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

class Login extends Component {  

    state = { data: [] }

    componentWillMount(){
        fetch('https://api.myjson.com/bins/5432', {
            method: 'POST',
            headers: {
                'Accept': 'application/json',
                'Content-type': 'application/json',
                'Authorization': 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJodHRwOi8vc2NoZW1hcy54bWxzb2FwLm9yZy93cy8yMDA1LzA1L2lkZW50aXR5L2NsYWltcy9uYW1lIjoiR3JlZyIsInVuaXF1ZV9uYW1lIjoiZ2dyYWZmIiwibmJmIjoxNTI0ODM5Nzc1LCJleHAiOjE1MjQ5MjYxNzV9.xhvdfaWkLVZ_HLwYQuPet_2vlxNF7AoYgX-XRufiOj0'
            },
            body: JSON.stringify({
                username: 'userName',
                password: 'pwd',
            })
        }

        ) /*end fetch */
        .then(results => results.json()) 
        .then(data => this.setState({ data: data }))   
      }

    //render component
    render() {
    console.log(this.state.data);
        return (
            <div>
                <div className="container">

                <div className="loginContainer">
                    <h2>Member Login</h2>
                    <form>
                        <div className="form-group">
                            <label for="username">User Name:</label>
                            <input type="text" class="form-control" id="{userName}" placeholder="Enter User Name" name="userName" />
                        </div>
                        <div className="form-group"> 
                            <label for="pwd">Password:</label>
                            <input type="password" class="form-control" id="{pwd}" placeholder="Enter password" name="pwd" />
                        </div>
                        <div>
                            <button type="button" onClick="getInfo" className="btn btn-primary">Submit</button>
                        </div>
                   </form>
                </div>
            </div>
            </div> 

        );
      }

//function
        getInfo() {
            var username = document.getElementById('{userName}').value
            var password = document.getElementById('{pwd}').value

            if(username == {userName} && password == {pwd}) {
               window.location.href="MemberInfo.jsx";
                return
            }

        } 
//end function
}

export default Login

我能得到一些帮助吗？

【问题讨论】：

是您的目标，只是缓存用户输入并使用它来进行 API 调用。为什么要手动查询 DOM？也许您应该查看Controlled Components 并将事件处理程序附加到表单节点的onSubmit 事件以触发您的API 调用

标签： javascript json reactjs api

【解决方案1】：

你不能将 vanillaJS getElementById 与 react 混合使用 .... 首先你会得到非常奇怪的行为，因为 React 在 JSDom 而不是真正的 dom 中进行繁重的 DOM 操作，（所以在循环中你可以让这个元素不在 DOM 中），其次你对 dom ID {userName} 有奇怪的 ID 命名，即使是 jQuery 而不是 React 也会混淆。

您必须将输入转换为受控输入 https://reactjs.org/docs/forms.html，您将在其中绑定它的 onChange 侦听器并从 Docs 中的 event 传递值，有一个很好的示例如何实现这一点。

【讨论】：