reactjs - 我在总和上加一个总和的数学函数不起作用。我收到错误消息“未定义总和”

Question

我正在尝试创建一个反应应用程序，让用户输入一个项目、项目数量和价格，然后用户输入几个列出的项目，每次输入新项目时总金额应该增加。我将总和添加到总和（项目价格）的函数似乎不起作用。我有一个 sum 作为一个属性，而 totalSum 作为一个属性。如何使用“this.state.sum”设置Sate(totalSum)？

这是我的代码：

import React from 'react';
import 'bootstrap/dist/css/bootstrap.css';


export default class Kvitton extends React.Component {
    constructor (props) {
        super(props);
        this.state = { 
            produkter: [], 
            produkt: '',
            antal:"",
            pris: "",
            sum:"",
            totalSum:""
            
        
        }
    this.eFormChange = this.eFormChange.bind(this);
    //this.eSumma = this.eSumma.bind(this);
    this.eSubmit  = this.eSubmit.bind(this);       
    console.log('constructor'); 
}

render() {
    console.log('Render'); 
    return (
        <div>
            <h3>Kvitto</h3>
           
            <form onSubmit={this.eSubmit} >
                <p>
                    <label htmlFor="produkt">Produkt: </label>
                    <input id="produkt" onChange={this.eFormChange} value={this.state.produkt} />

                </p>
                <p>
                    <label htmlFor="antal">Antal: </label>
                    <input id="antal" onChange={this.eFormChange} value={this.state.antal} />

                </p>
                <p>
                    <label htmlFor="pris">Pris: </label>
                    <input id="pris" name="pris" onChange={this.eFormChange} value={this.state.pris} />
                </p>
                <p>
                    <button className="btn btn-secondary btn-sm">Submit </button>
                </p>
                 <p> <ProduktLista produktItems={this.state.produkter} /> </p>
                <p>
                      <label htmlFor="produkt"> </label> 
                      <span> Summa: {this.doTotalSum(this.state.summa, this.state.totalSumman)} </span>
                </p>

                
                
            </form>
        </div>
    );
}

eFormChange (e) {
    var inputObj = {};
    inputObj[e.target.id] = e.target.value;                 
    this.setState( inputObj );
    console.log("-----------"+ inputObj);
}

eSubmit(e) {
    e.preventDefault();
    alert('submit');
    if (this.state.produkt.length === 0 ) {
        return alert("You have not given a product");
    }
    if (this.state.antal.length === 0 || !Number(this.state.antal))  {
        return alert("Antal has to be a number");
    }
    e.preventDefault();
    if (this.state.pris.length === 0 || !Number(this.state.antal)) {
        return alert("Price has to be a number");
    }
    const newProduct = { 
        produkt: this.state.produkt,
        antal: this.state.antal, 
        pris: this.state.pris,
        sum: (this.state.antal) *  (this.state.pris),
        totalSum: + {sum}

    };
  
    this.setState(state => ({
      produkter: state.produkter.concat(newProduct),
      produkt: '',
      antal:'',
      pris: '',
      sum:'',
      totalSum:''
    }));
} 
   
    }
  
    const ProduktLista = ({ produktItems }) => {
        return (
          <ul>
            {produktItems.map(({ antal, pris, produkt, sum, totalSum }) => (
                <li key={produkt}>
                    {produkt + ' - ' + antal + ' - ' + pris + '   ' }
                    summan: {antal*pris});
                </li>
             ))} 
          </ul>
        );
      }
   
    function doTotalSum(summa, totalSumman) {
      const result = summa + totalSumman;
       return result;
       
    }

标签： reactjs

Answer 1

我已经编辑了您更改的整个代码的答案。请让我知道它是否是您需要的。

import React from 'react';

const ProduktLista = ({produktItems}) => {
  return (
    <ul>
      {produktItems.map(({antal, pris, produkt, sum, totalSum}) => (
        <li key={produkt}>
          {produkt + ' - ' + antal + ' - ' + pris + '   '}
          summan: {sum});
        </li>
      ))}
    </ul>
  );
};

export default class Kvitton extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      produkter: [],
      produkt: '',
      antal: '',
      pris: '',
      sum: 0,
      totalSum: 0,
    };
    this.eFormChange = this.eFormChange.bind(this);
    //this.eSumma = this.eSumma.bind(this);
    this.eSubmit = this.eSubmit.bind(this);
    console.log('constructor');
  }

  render() {
    console.log('Render');
    return (
      <div>
        <h3>Kvitto</h3>

        <form onSubmit={this.eSubmit}>
          <p>
            <label htmlFor="produkt">Produkt: </label>
            <input
              id="produkt"
              onChange={this.eFormChange}
              value={this.state.produkt}
            />
          </p>
          <p>
            <label htmlFor="antal">Antal: </label>
            <input
              id="antal"
              onChange={this.eFormChange}
              value={this.state.antal}
            />
          </p>
          <p>
            <label htmlFor="pris">Pris: </label>
            <input
              id="pris"
              name="pris"
              onChange={this.eFormChange}
              value={this.state.pris}
            />
          </p>
          <p>
            <button className="btn btn-secondary btn-sm">Submit </button>
          </p>
          <p>
            {' '}
            <ProduktLista produktItems={this.state.produkter} />{' '}
          </p>
          <p>
            <label htmlFor="produkt"> </label>
            <span> Summa: {this.state.totalSum} </span>
          </p>
        </form>
      </div>
    );
  }

  eFormChange(e) {
    var inputObj = {};
    inputObj[e.target.id] = e.target.value;
    this.setState(inputObj);
    console.log('-----------' + inputObj);
  }

  eSubmit(e) {
    e.preventDefault();
    alert('submit');
    if (this.state.produkt.length === 0) {
      return alert('You have not given a product');
    }
    if (this.state.antal.length === 0 || !Number(this.state.antal)) {
      return alert('Antal has to be a number');
    }
    e.preventDefault();
    if (this.state.pris.length === 0 || !Number(this.state.antal)) {
      return alert('Price has to be a number');
    }

    const sum = this.state.antal * this.state.pris;
    const newProduct = {
      produkt: this.state.produkt,
      antal: this.state.antal,
      pris: this.state.pris,
      sum,
      totalSum: this.state.totalSum + sum,
    };

    this.setState({
      produkter: this.state.produkter.concat(newProduct),
      produkt: '',
      antal: '',
      pris: '',
      sum,
      totalSum: this.state.totalSum + sum,
    });
  }
}