反应:将用户输入的表单数据添加到当前状态

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);

这是一个代码

Answer 1

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

1. 最初将this.state.data设置为 5，不带引号，因此它是一个数字
2. 您应该在状态中具有另一个变量，称为input。在您的handleChange方法中，您应该将其更新为e.target.value.
3. 在您的handleSubmit中，您将this.state.input转换为一个数字，然后用this.state.data将其相加。这应该会得到你的答案。

Answer 2

您使用"5"初始化了数据状态，并且它是字符串类型， 将其更改为 5 并检查结果。

this.state = {
data: 5
};