Реагировать - L oop входов и получить сумму суммы

Question

Я пытаюсь в React JS получить сумму входных данных группы и поместить сумму их общих значений в тег div.

Я пытаюсь запустить это событие всякий раз, когда пользователь введите любой из входных данных

Проблема в том, что я уверен, что у React есть правильный способ сделать это!

Это моя слабая попытка (пожалуйста go просто - я новичок в кодировании:)

HTML

<input type="number" id="comp1" name="comp1" onChange={this.handleTotal} />
<input type="number" id="comp2" name="comp2" onChange={this.handleTotal} />
<input type="number" id="comp3" name="comp3" onChange={this.handleTotal} />
<input type="number" id="comp4" name="comp4" onChange={this.handleTotal} />
<input type="number" id="comp5" name="comp5" onChange={this.handleTotal} />
<input type="number" id="comp6" name="comp6" onChange={this.handleTotal} />
<div id=total></div>

JS

handleTotal = e => {  
    // Grab all inputs that start with ID 'comp'
    let inputs = document.querySelectorAll('[id^="comp"]');

    // Trying to loop through the values and get the sum of all inputs
    for (var i = 0; i < inputs.length; i++) {
        let totalVal = inputs[i].value
        console.log(totalVal);
    }

    //Trying to grab total values of all inputs and put in element 
    document.getElementById('total').innerHTML = totalVal;
}

Answer 1

const handleFormSubmit = (e) => {
    e.preventDefault();
    const formData = new FormData(e.target);
    let total = 0;
    for (let [key, value] of formData.entries()) {
        total += value * 1;
    }
    document.querySelector('#total').textContent = total;
};

document.addEventListener('DOMContentLoaded', () => {
  const form = document.querySelector('form');
  form.addEventListener('submit', handleFormSubmit, false);
});

<form>
  <input type="number" id="comp1" name="comp1" />
  <input type="number" id="comp2" name="comp2" />
  <input type="number" id="comp3" name="comp3" />
  <input type="number" id="comp4" name="comp4" />
  <input type="number" id="comp5" name="comp5" />
  <input type="number" id="comp6" name="comp6" />
  <button type="submit">submit</button>
</form>
<span>total</span>
<div id=total></div>

Answer 2

В настоящее время вы не используете привязку данных React.

Лучше всего использовать Состояние React для хранения значений total и всех comp входов .

Я также использовал метод .reduce , чтобы вычислить сумму для каждого из значений полей ввода. Но вы можете добиться того же самого с помощью for l oop.

JSFiddle: альтернативная функция "Calculate" с помощью для l oop

Больше информации об обработке ввода в React

class App extends React.Component {
  constructor() {
    super();
    this.state = {
      total: 0,
      numbers: {
        comp1: 1,
        comp2: 0,
        comp3: 4,
        comp4: 0,
        comp5: 0,
        comp6: 0
      }
    };
  }

  componentDidMount() {
    // Calculates the total after component is mounted
    this.setState({ total: this.calculateTotal(this.state.numbers) });
  }

  calculateTotal = (numbers) => {
    return Object.entries(numbers).reduce((finalValue, [key, value]) => {
      if (value === "") {
        // if entered value is empty string "", omits it
        return finalValue;
      }
      return finalValue + value;
    }, 0);
  }

  handleTotal = (e) => {
    const { value, name } = e.target; // gets the name and value from input field
    const parsedValue = value === "" ? "" : parseFloat(value); // parses the value as a number or if empty treats it as empty string ""
    this.setState((prevState) => {
      // creates new immutable numbers object, using previous number values and the currently changed input value
      const updatedNumbers = {
        ...prevState.numbers,
        [name]: parsedValue
        // https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Object_initializer#Computed_property_names
      };
      // calculates the new total from updated numbers:
      const newTotal = this.calculateTotal(updatedNumbers);
      return {
        numbers: updatedNumbers,
        total: newTotal
      }
    })
  }

  render() {
    return (
      <div>
        <input type="number" name="comp1" onChange={this.handleTotal} value={this.state.numbers.comp1} />
        <input type="number" name="comp2" onChange={this.handleTotal} value={this.state.numbers.comp2}/>
        <input type="number" name="comp3" onChange={this.handleTotal} value={this.state.numbers.comp3}/>
        <input type="number" name="comp4" onChange={this.handleTotal} value={this.state.numbers.comp4}/>
        <input type="number" name="comp5" onChange={this.handleTotal} value={this.state.numbers.comp5}/>
        <input type="number" name="comp6" onChange={this.handleTotal} value={this.state.numbers.comp6}/>
        <div id="total">{this.state.total}</div>
      </div>
    );
  }
}

ReactDOM.render(<App />, document.getElementById('root'));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<div id="root"></div>

Answer 3

Вы просто присваиваете переменную в каждой итерации al oop. Измените на что-то вроде этого: оператор

handleTotal = e => {  
    // Grab all inputs that start with ID 'comp'
    let inputs = document.querySelectorAll('[id^="comp"]');

    // Trying to loop through the values and get the sum of all inputs
    let totalVal=0
    for (var i = 0; i < inputs.length; i++) {
        totalVal += inputs[i].value
        console.log(totalVal);
    }

    //Trying to grab total values of all inputs and put in element 
    document.getElementById('total').innerHTML = totalVal;
}

+= просто добавляет значение следующего элемента в общую переменную. равно totalVal = totalVal + inputs[i].value