反应 onchange 事件：this.setState() 没有设置状态？答案

【问题标题】：React onchange event: this.setState() not setting state?反应 onchange 事件：this.setState() 没有设置状态？
【发布时间】：2019-02-15 06:20:22
【问题描述】：

当用户在用户名和密码字段中键入值时，我试图通过用户名和密码的this.setState() 设置状态。我正在使用onChange 事件类型

ISSUE：状态没有改变。我在 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;

【问题讨论】：

你正在改变的状态是this.state.username，你控制台的状态是this.state.data.username
this.setState({ username: inputUsername });
Atm 这就是我所拥有的（丑陋）： const { username } = this.state.data;让 a = 用户名； this.setState({ a: inputUsername });
@Shaz，即使您对值进行解构，在设置状态时，您也需要指定完整的嵌套结构，而不仅仅是嵌套键。请查看下面的答案以了解如何做到这一点
啊！所以如果我有嵌套的状态对象属性，我必须使用 prevState ... ]

标签： javascript reactjs forms onchange

【解决方案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 } }));
  };

【讨论】：

【解决方案2】：

你正在改变的状态是this.state.username，你控制台的状态是this.state.data.username。

要在您的状态下设置data，请使用：

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

【讨论】：