Реагировать на событие обмена: this.setState () не устанавливает состояние?

Question

Я пытаюсь установить состояние с помощью this.setState() имени пользователя и пароля, когда пользователь вводит значение в поле имени пользователя и пароля.Я использую onChange тип события

ВЫПУСК : состояние не меняется.Я регистрирую this.state.data.username в render ().

import React, { Component } from "react";
import { Form, Button } from "react-bootstrap";
import { Link } from "react-router-dom";

var Joi = require("joi-browser");

class Login extends Component {
  state = {
    data: { username: "a", password: "b " },
    errors: {
      email: "ddsfds",
      password: "aaaa"
    }
  };

  schema = {
    username: Joi.string()
      .min(0)
      .required()
      .label("Username"),
    password: Joi.string()
      .required()
      .label("Password")
  };

  handleSubmit = event => {
    event.preventDefault();
    console.log("submited.", event.target);

    const { data } = this.state;

    const { err } = Joi.validate(data, this.schema);

    if (err) {
      console.log("error is true", err);
    } else {
      console.log("not true");
    }
  };

  handleEmailOnChange = event => {
    const inputUsername = event.target.value;
    console.log("input is...", inputUsername);

    this.setState({ username: inputUsername });
  };

  handlePassword = event => {
    const passwordInput = event.target.value;

    this.setState({ password: passwordInput });
  };

  render() {
    console.log("username ", this.state.data.username);
    return (
      <div id="form-wrapper">
        <Form>
          <Form.Group controlId="formBasicEmail">
            <h4>Sign In</h4>
            <Form.Control
              type="email"
              placeholder="Enter email"
              onChange={this.handleEmailOnChange}
            />
            {/* <span>{this.state.errors.username} </span> */}
          </Form.Group>

          <Form.Group controlId="formBasicPassword">
            <Form.Control
              type="password"
              placeholder="Password"
              onChange={this.handlePassword}
            />
          </Form.Group>

          <div id="register-wrapper">
            <Link to="/register" type="button" className="btn btn-warning">
              Register Account
            </Link>
            <Button
              variant="primary"
              className="m-2"
              type="submit"
              onClick={this.handleSubmit}
            >
              Submit
            </Button>
          </div>
        </Form>
      </div>
    );
  }
}

export default Login;

Answer 1

Вы не обновляете состояние правильно или используете его неправильно.Состояние в вашем конструкторе имеет объект данных с username и password

 handleEmailOnChange = event => {
    const inputUsername = event.target.value;
    console.log("input is...", inputUsername);

    this.setState(prev => ({data: {...prev.data, username: inputUsername } }));
  };

  handlePassword = event => {
    const passwordInput = event.target.value;
    this.setState(prev => ({data: {...prev.data, password: passwordInput } }));
  };

Answer 2

Состояние, которое вы меняете, - this.state.username, то, которое вы поддерживаете - this.state.data.username.

Чтобы установить data в вашем штате, используйте:

this.setState(prevState => ({
  data: {
    username: inputUsername,
    ...prevState.data
  }
})