React：将用户输入的表单数据添加到当前状态

Question

我正在开发一个具有表单输入的 React 项目。我希望用户在输入字段中输入一个数字，然后我想获取该数字并将其添加到状态中的数字。

即this.state.data包含数字5，用户在表单中输入数字10，this.state.data更新为15。

我该怎么做？到目前为止，我尝试过的所有操作都是将新值与旧值连接起来，最终得到 510 而不是 15。

import React, { Component } from "react";
import ReactDOM from "react-dom";
import "./styles.css";

class App extends Component {
  constructor(props) {
    super(props);

    this.state = {
      data: '5'
    };
  }

  handleSubmit = e => {
    e.preventDefault();
    alert(this.state.data);
  };

  handleChange = e => {
    this.setState({
      data: this.state.data + e.target.value
    });
  };

  render() {
    return (
      <div className="App">
        <form onSubmit={this.handleSubmit}>
          <input
            type="text"
            value={this.state.data}
            onChange={this.handleChange}
          />
          <input type="submit" />
        </form>
      </div>
    );
  }
}

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

Here is a Codesandox

Answer 1

您用“5”作为数据状态的首字母，并且它是字符串类型，将其更改为 5 并检查结果。

 this.state = {
  data: 5
};

Answer 2

原因是您要连接两个字符串。您在字符串中将 this.state.data 初始设置为 5，并且用户输入也是一个字符串。这很棘手，因为 JavaScript 是一种松散类型的语言。如果您想将数字相加 (5 + 10 = 15)。你可以这样做：

最初将 this.state.data 设置为 5 不带引号所以它是一个数字
你应该有另一个状态变量，叫做 input。在您的 handleChange 方法中，您应该将其更新为 e.target.value.
在您的 handleSubmit 中，您可以将 this.state.input 转换为数字，然后将其与 this.state.data 相加。这应该会给你答案。

React：将用户输入的表单数据添加到当前状态

React: Add user inputted form data to current state

javascript

state

concatenation

setstate

reactjs