ReactJs输入第一个值变空

Question

import React, { Component } from "react";

export default class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = { value: "" };

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

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

  render() {
    return (
      <form>
        <label>
          Name:
          <input
            type="text"
            value={this.state.value}
            onChange={this.handleChange}
          />
        </label>
        <input type="submit" value="Submit" />
      </form>
    );
  }
}

console log screenshot

我的第一个输入值是空的。我有不同的应用程序。我基本上是在尝试做小费计算器应用程序。我不需要提交按钮。用户将输入一个值，但由于第一个值为空，因此计算不正确。同时不显示最后输入的值，只有点击时，所有输入的值都是正确的。顺便说一句，我从 React 自己的网站上得到了这个表格，但我遇到了同样的错误。谢谢！

Answer 1

您的console.log 在更改之前记录该值。因此它将始终是以前的值。

您还必须记住，Component.setState 方法可能不会立即执行。

将 setState() 视为更新组件的请求而不是立即命令。为了更好地感知性能，React 可能会延迟它，然后一次更新多个组件。 React 不保证立即应用状态更改。

因此，您应该使用callback。例如

handleChange(event) {
  this.setState({ value: event.target.value }, () => {
    console.log(this.state.value);
  });
}

这是一个可执行的例子。点击运行代码sn-p。

class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = { value: "" };

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

    handleChange(event) {
      this.setState({ value: event.target.value }, () => {
        console.log(this.state.value);
      });
    }
  render() {
    return (
      <form>
        <label>
          Name:
          <input
            type="text"
            value={this.state.value}
            onChange={this.handleChange}
          />
        </label>
        <input type="submit" value="Submit" />
      </form>
    );
  }
}


ReactDOM.render(<App />, document.getElementById("root"));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/17.0.1/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/17.0.1/umd/react-dom.production.min.js"></script>
<div id="root"></div>

Answer 2

将初始值设置为0，使其不为空。

this.state = { value: 0 };

还将您的console.log 作为回调函数移动到setState，以便您可以看到更新后的值。

import React, { Component } from "react";

export default class App2 extends React.Component {
  constructor(props) {
    super(props);
    this.state = { value: 0 };
    this.handleChange = this.handleChange.bind(this);
  }

  handleChange(event) {
    this.setState({ value: event.target.value }, () => {
      console.log(this.state.value);
    });
  }

  render() {
    return (
      <form>
        <label>
          Name:
          <input
            type="text"
            value={this.state.value}
            onChange={this.handleChange}
          />
        </label>
        <input type="submit" value="Submit" />
      </form>
    );
  }
}