1

Tengo un formulario que intento vincular el evento "submit" para que me muestre un alert con el valor del input password.

El evento submit funciona porque recibo un alert vacio, pero no me muestra el valor.

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

export default class Profile extends Component {

constructor(props) {
    super(props);
    this.password = {value: ''};

    this.handleChange = this.handleChange.bind(this);
    this.handleSubmit = this.handleSubmit.bind(this);

}

handleChange(event) {
    this.setState({value: event.target.value});
}

handleSubmit(event) {
    alert('Password was submitted: ' + this.password.value);
    event.preventDefault();
}

render() {

    return (
        <div>
            <Form>
                <Form.Group controlId="formBasicPassword">
                    <Form.Label>Password</Form.Label>
                    <Form.Control type="password" id="password" name="password" placeholder="Password" />
                </Form.Group>

                <Button onClick={this.handleSubmit}>Enviar</Button>
            </Form>
        </div>
    );
}

}

1 respuesta 1

4

Lo primero que veo es que en el método handleChange asignas el valor del input al estado del componente, pero luego ese estado no lo estas utilizando en el método handleSubmit.

Lo segundo no estas asignado en ningún lugar handleChange por lo que no estas actualizando el valor del estado.

import React, { Component } from "react";


export default class Profile extends Component {

constructor(props) {
    super(props);
    this.state = {password: ''};


    this.handleChange = this.handleChange.bind(this);
    this.handleSubmit = this.handleSubmit.bind(this);

}

handleChange(event) {
  this.setState({
    password: event.target.value
  })   
}

handleSubmit(event) {
    alert('Password was submitted: ' + this.state.password);
    event.preventDefault();
}

render() {
  console.log("vamoss");
    return (        
        <div>
            <form>
                <div controlId="formBasicPassword">
                    <label>Password</label>
                    <input type="password" id="password" name="password" placeholder="Password" onChange={this.handleChange} />
                </div>

                <button onClick={this.handleSubmit}>Enviar</button>
            </form>
        </div>
    );
}
}

En el constructor creamos el estado del componente, que luego haremos uso en las funciones handleChange y handleSubmit. Al input le asignamos onChange={this.handleChange}, ya que esto nos notificará los cambios y los modificará en el estado.

He probado el código y funciona, no he reac-bootstrap, pero la lógica es la misma el componente seguramente acepte onChange.

Saludos y espero que te funcione

1
  • Gracias, lo acabo de probar y funciona perfectamente
    – ilernet
    Commented el 7 feb. 2020 a las 17:22

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.