反應onchange事件：this.setState（）未設置狀態？

Question

當用戶在用戶名和密碼字段中鍵入值時，我試圖通過用戶名和密碼的this.setState()設置狀態。 我正在使用onChange事件類型

問題 ：狀態沒有改變。 我在render（）中記錄this.state.data.username。

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
  }
})