Обновление общей стоимости конфет путем увеличения или уменьшения количества в поле ввода - React JS

Question

В простой программе я хочу увеличить или уменьшить количество конфет, а затем распечатать их стоимость (* 5, поскольку стоимость 1 конфеты составляет 5 долларов США) в поле ввода. К сожалению, значение не обновляется. Может кто-нибудь помочь?

class App extends React.Component {
  state = {
    candy: 0,
    candyPrice: 0
  }
  render() {

    return (
    <div>
        <input type="number" value={this.state.candy} onChange={this.alpha} name="candy" id="candy"/>
        <span>{this.state.candyPrice}</span>
    </div>
   )
   alpha = (ev) => {
    this.setState({
            [ev.target.name]: ev.target.value
    });
    this.state.candyPrice = this.state.candy * 5; 
   }
   
  }
}
ReactDOM.render(<App/>, document.getElementById('app'));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.js"></script>
<div id="app"></div>

Answer 1

Вам нужно изменить несколько вещей в вашем коде:

• Переместите ваш onChange обработчик событий за пределы метода рендеринга.

• Используйте this.setState вместо прямого изменения объекта состояния при обновлении candyPrice.

• Почему бы не изменить состояние напрямую? Когда вы изменили состояние с помощью этого this.state.candyPrice, это вызвало странную ошибку, когда отображаемая цена конфет является значением предыдущего ввода * 5.

Прямое изменение состояния не рекомендуется, так как React не будет знать изменение и оно не вызовет повторного рендеринга.

---

Учитывая это, ваш обработчик событий должен выглядеть примерно так.

alpha = ev => {
  const candies = ev.target.value;
  this.setState({
    [ev.target.name]: candies,
    candyPrice: candies * 5
  });
};

См. рабочая реализация .