document.querySelector 返回未定义

Question

我需要从我的登录屏幕检索输入值并切换到我的主屏幕。

我创建了一个 document.querySelector 来访问我的登录 ID，并将这个值保存在一个名为 empresa 的 const 中。

在我的房子里，我导入了这个常量并创建了一个 console.log 来检查我是否在将数据输入到我的 setState 时收到了数据，所以我得到了等于 empresa 编号的数组位置。但该值返回 Indefinite。

我也收到警告：

警告：道具类型失败：为没有 onChange 处理程序的表单字段提供了值道具。这将使字段只读。如果该字段必须是可更改的，请使用默认值。否则，设置 onChange 或只读。

我该如何解决这个问题？

登录界面：

import React, { Component } from 'react'

import {LoginService} from "../../services/LoginService"

import './loginPage.css'

//Recebe o número da empresa
export const empresa =  parseInt(document.querySelector("#empresa").value)


class Login extends Component   {

    
    
    fazerLogin  =   infosDoEvento   =>  {
        
        

        infosDoEvento.preventDefault();
          const dadosDeLogin    =   {
                login:  this.refs.inputLogin.value,
                senha:  this.refs.inputSenha.value,

        };
        console.log(dadosDeLogin)
        LoginService.logar(dadosDeLogin)
        .then(()    =>  {
                this.props.history.push("/home");
        })
        .catch(err  =>  {
                console.error(`[Erro    ${err.status}]`,    err.message);
        });
    }

    
    
   
    render() {
        return (
            
                <div className="loginPage">
                    <div className="container">
                   
                            <h2 className="loginPage__title">Seja bem vindo!</h2>
                            <form className="loginPage__form" action="/" onSubmit={this.fazerLogin}>
                                <div className="loginPage__inputWrap">
                                    <label className="loginPage__label" htmlFor="login">Login</label> 
                                    <input ref="inputLogin" className="loginPage__input" type="text" id="login" name="senha"/>
                                </div>
                                <div className="loginPage__inputWrap">
                                    <label className="loginPage__label" htmlFor="senha">Senha</label> 
                                    <input ref="inputSenha" className="loginPage__input" type="password" id="senha" name="senha"/>
                                </div>

                                <div>
                                    <label className="loginPage__label" htmlFor="login">Empresa</label> 
                                    <input ref="inputEmpresa" className="loginPage__input" type="text"  id="empresa" name="empresa" />

                                </div>
                                <br></br>
                                <div className="loginPage__inputWrap">


                                    <button className="loginPage__btnLogin" type="submit">
                                        Logar
                                    </button>
                                </div>
                            </form>
                   
                    </div>
                </div>
         
        )
    }
}

export default Login;

主屏幕：

import React, { Component } from 'react'
import { Container, Table} from 'react-bootstrap'
import Extrato from '../Extrato'
import NavBar from '../NavBar'

import {consultarResumo} from '../../services/Home/index'

//Importa o valor da Empresa
import {empresa} from '../Login/index'

//Imprime o valor da Empresa
window.onload = teste => {console.log(empresa)}


class Home  extends Component   {
    
    

    constructor(props){
        super(props);

        this.state = {
           
            empresaId: 0,
                nomeEmpresa: "EMPRESA UM S/A",
                cnpj: 0,
            
            dadosBancario: {
                banco: 0,
                bancoNome: "CONTA SIMPLES",
                agencia: 0,
                conta: 0,
                digitoConta: 0
    },
                saldo: 0
            
        }
        
    }

    componentDidMount(){
        
        //Consulta na API e busca a posição igual o valor da empresa
        consultarResumo().then(dados => this.setState(dados[empresa]))
        
    }

    render() {
        return (
        <Container>
        <NavBar></NavBar>   
           <br/>
            <Table striped bordered hover variant="dark">
                    <thead>
                        <tr>
                        <th>{this.state.nomeEmpresa}</th>
                        <th>CNPJ: {this.state.cnpj}</th>
                        <th>Número do Banco: {this.state.dadosBancario.banco}</th>
                        <th>{this.state.dadosBancario.bancoNome}</th>
                        <th>Agência: {this.state.dadosBancario.agencia}</th>
                        <th>Conta: {this.state.dadosBancario.conta}</th>
                        <th>Digito da Conta: {this.state.dadosBancario.digitoConta}</th>
                        <th>Saldo: {this.state.saldo.toLocaleString("PT-BR", {style: "currency", currency : "BRL"})}</th>
                        </tr>
                    </thead>
                </Table>
                <Extrato></Extrato>
        </Container>
        )
    }
    
}

export default Home;

Answer 1

您可以像这样更改代码。

$(document).ready( function() {
export const empresa =  parseInt(document.querySelector("#empresa").value)
})