Реагировать: Добавить введенные пользователем данные формы в текущее состояние - PullRequest
Новая
       14

Реагировать: Добавить введенные пользователем данные формы в текущее состояние

0 голосов
/ 20 сентября 2019

Я работаю над проектом 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);

Вот кодекс

Ответы [ 2 ]

1 голос
/ 20 сентября 2019

Причина в том, что вы объединяете две строки.У вас this.state.data изначально установлено значение 5 в строке, а пользовательский ввод также является строкой.Это сложно, так как JavaScript - это язык со свободной типизацией.Если вы хотите сложить числа вместе (5 + 10 = 15).Вы можете сделать это:

  1. Первоначально установить this.state.data на 5 без кавычек, поэтому это число
  2. В вашем состоянии должна быть другая переменная, называемая чем-то вроде input.В вашем handleChange методе вы должны просто обновить это значение до e.target.value.
  3. . В вашем handleSubmit вы должны затем преобразовать this.state.input в число и затем добавить его с помощью this.state.data.Это должно получить ваш ответ.
1 голос
/ 20 сентября 2019

вы инициализировали состояние данных с помощью '5' и набрали его строку, измените его на 5 и проверьте результат. 

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