javascript - 在 React 上保持状态

Question

我现在正在用 React 做一个应用程序。
设置计算函数，state指定的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;