как обрабатывать несколько временных состояний в реакции (бюджетное приложение) - PullRequest
Новая
       3

как обрабатывать несколько временных состояний в реакции (бюджетное приложение)

2 голосов
/ 02 февраля 2020

это изображение

У меня есть учебный пример для создания приложения бюджета в реакции. есть форма, которая содержит 3 для ввода, а именно выберите тип (расходы, доходы), сумму и название. * nb pengeluaran = расход, pemasukan = доход, джумла = сумма.

У меня есть два компонента, то есть InputData для входных данных, TotalMoney для отображения общих денег, расходов и доходов.

форма для добавления обработчик data 

<form onSubmit={this.countMoney}>
            <div className="form-group col-md-4">
              <label>Tipe</label>
              <select className="form-control" onChange={this.onChangeTipe}>
                <option>Pilih</option>
                <option value="pengeluaran">Pengeluaran</option>
                <option value="pemasukan">Pemasukan</option>
              </select>
            </div>

.......input value for amount and title

при отправке входных данных 

countMoney = event => {
    event.preventDefault();
    let items = {
      // id: this.state.itemLists.length + 1,
      tipe: this.state.tipe,
      jumlah: this.state.jumlah,
      judul: this.state.judul
    };

    this.setState(
      {
        jumlah: 0,
        judul: "",
        items: items,
        itemLists: [...this.state.itemLists, items]
      },
      () => {
        if (this.state.tipe === "pengeluaran") {
          this.setState({
            pengeluaran: this.state.pengeluaran + items.jumlah,
            totalUang: this.state.totalUang - items.jumlah
          });
        } else if (this.state.tipe === "pemasukan") {
          this.setState({
            pemasukan: this.state.pemasukan + items.jumlah,
            totalUang: this.state.totalUang + items.jumlah
          });
        }
      }
    );

каждый введенный элемент будет сделан объектом и введен в состояние itemLists

это компоненты для отображения данные 

function TotalMoney(props) {
  return (
    <div className="totalMoney">
      <div className="description">
        Total Pemasukan
        <div className="rupiah">{props.pemasukan}</div>
      </div>
      <div className="description">
        Total Pengeluaran
        <div className="rupiah">{props.pengeluaran}</div>
      </div>
      <div className="description">
        Total Uang
        <div className="rupiah">{props.totalUang}</div>
      </div>
    </div>
  );
}

у меня возникли проблемы при вводе данных, подобных этому:

  1. Пемасукан (доход) = 20000
  2. Пенгелуаран (расход) = 10000
  3. Pemasukan (доход) = 20000
  4. Pengeluaran (расход) = 5000

Выход должен быть

  1. Всего Pemasukan (доход) = 40000
  2. Всего Пенгелюран (расходы) = 15000
  3. Всего Уанг (Деньги) = 25000

, но на выходе получается

  1. Всего Пемасукан (доход ) = 02000020000
  2. Всего Пенгелюран (расходы) = 0100005000
  3. Всего Уанг (Деньги) = 1000015000

1 Ответ

1 голос
/ 02 февраля 2020

Похоже, проблема в том, что вы пытаетесь добавить строки вместе. Обычно результатом входного элемента является строка, пытающаяся запустить parseInt для ответов

...