Question

我在 React 中有一个受控表单，绑定值。当我尝试使用状态值时，我返回 undefined。我想在表单的输入中获取该值，以便在组件功能的测试中使用它。遵循代码。

App.js

import React from "react";
import {Button,Form,Card,Modal,Spinner} from 'react-bootstrap';
import CodigoValidacao from './components/codigoValidacao';
import './App.css';
import 'bootstrap/dist/css/bootstrap.min.css';

class App extends React.Component {

  constructor(props) {
    super(props);
    
   this.handleInputChangeCodigo=this.handleInputChangeCodigo.bind(this);
   this.validaCodigo=this.validaCodigo.bind(this);

   this.state = {
     CodigoDigitado: '',
  }
}
handleInputChangeCodigo(event){

   this.setState({CodigoDigitado: event.target.value})
   console.log('Digitando: '+ this.state.codigoDigitado)
}
validaCodigo(){
   let codDigi = this.codigoDigitado;
   console.log(this.state.CodigoValidacao + ' - ' + this.state.codigoDigitado +' - '+ codDigi);
 }
render(){
   return (
      <CodigoValidacao handleInputChangeCodigo={this.handleInputChangeCodigo}
                                                    codigoDigitado={this.state.CodigoDigitado}
                                                    validaCodigo={this.validaCodigo}
   );
  }
}

CodigoValidacao.js

import React from 'react';
import {Form, Button} from 'react-bootstrap';

class codigoValidacao extends React.Component {
    constructor(props) {
      super(props);
    }

    render(){
       return(
         <Form>
            <Form.Group controlId="codigoVerificacao">
              <Form.Label style={{fontWeight: 'bold'}}>
                Código de Verificação
              </Form.Label>   
              <Form.Control type="text" value={this.props.codigoDigitado}
                                        onChange={this.props.handleInputChangeCodigo}
                                        placeholder="código de verificação" />
              <Button variant="primary" onClick={this.props.validaCodigo}>
                Valida
              </Button>
            </Form.Group>
          </Form>  
       );
     }
}

export default codigoValidacao;

FireFox 控制台输出：

enter image description here

Answer 1

您正在记录 condigoDigitado 而不是 CodigoDigitado。此外，尝试使用驼峰命名法来命名变量和函数名，并尝试在代码中使用英文术语（变量、函数等）

handleInputChangeCodigo(event){
   this.setState({CodigoDigitado: event.target.value})
   console.log('Digitando: '+ this.state.codigoDigitado)
}

状态未定义的输入表单反应

1 个答案: