Question

我现在正在使用React进行申请。
设置计算功能，并且由状态指定的sum: 0保留在开头。
这是实际操作。
https://www.useloom.com/share/43bd30dc0f0741f7b09c63a3728d2ba9

    import React, { Fragment, Component } from "react";

    class Account extends Component {
      state = { sum: 0 };
      input = event => {
        this.setState({ input: event.target.value });
        console.log(this.state.input);
      };
      Plus = () => {
        this.setState({ sum: this.state.sum + this.state.input });
      };
      Main = () => {
        this.setState({ sum: this.state.sum - this.state.input });
      };

      render() {
        return (
          <Fragment>
            <h2>口座</h2>
            <h3>
              現在:&nbsp;
              {this.state.sum}
            </h3>
            <input onChange={this.input} />
            <br />
            <button onClick={this.Plus}>収入</button>
            <button onClick={this.Main}>支出</button>
          </Fragment>
        );
      }
    }

    export default Account;

请让我知道擦除前导零的方法，以及为何保留sum: 0的原因。谢谢。

Answer 1

首先，您正在执行字符串连接而不是求和。

您需要从输入中获取一个数字，例如通过+运算符：

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

然后，当您要基于先前的状态设置状态时，应使用带有回调作为参数的setState方法，该方法为您提供先前的状态，例如：

this.setState(prevState => ({ sum: prevState.sum + prevState.input }));

然后，当您初始化状态时，应指定所有状态：

state = { sum: 0, input: 0 };

因此您的最终代码应类似于：

import React, { Fragment, Component } from "react";

class Account extends Component {
  state = { sum: 0, input: 0 };
  input = event => {
    this.setState({ input: +(event.target.value) });
    console.log(this.state.input);
  };
  Plus = () => {
    this.setState(prevState => ({ sum: prevState.sum + prevState.input }));
  };
  Main = () => {
    this.setState(prevState => ({ sum: prevState.sum - prevState.input }));
  };

  render() {
    return (
      <Fragment>
        <h2>口座</h2>
        <h3>
          現在:&nbsp;
          {this.state.sum}
        </h3>
        <input value={this.state.input} onChange={this.input} />
        <br />
        <button onClick={this.Plus}>収入</button>
        <button onClick={this.Main}>支出</button>
      </Fragment>
    );
  }
}

export default Account;

Answer 2

两件事：输入变得不受控制，并且必须将值从字符串转换为数字。

首先是一个微妙的问题，它将对您制作的更高级的应用程序有更大的帮助。您必须通过以下方式为您的输入分配一个value道具：

<input value={ this.state.input } onChange={this.input} />

还请记住为state.input分配一个初始值，像一个空字符串一样可以。

您遇到的主要问题是将输入值转换为字符串，您可以使用以下方法实现：

this.setState({ input: Number(event.target.value) })

还有一件事情，当您使用状态本身中的值更新状态时，请使用方法符号代替对象一个：

this.setState(prevState => ({ sum: prevState.sum + prevState.input }))

在React上保持状态

2 个答案: