Как в ReactJS взаимодействовать с props, которые были указаны при рендере компонента?

Question

Помогите, пожалуйста, разобраться: в ReactJS у меня есть компонент Food, который по сути представляет собой товар в корзине интернет-магазина. Есть некая цена и поле input, в котором уазывается количество единиц данного товара (по умолчанию, стоит "1").

class Food extends React.Component {
  constructor() {
    super();
    this.state = { prop: 1 }
  }

  render() {
    return (
      <div>
        <div className="count">
          <p>Количество</p>
          <button onClick={this.less}>-</button>
          <input value={this.state.prop} />
          <button onClick={this.more}>+</button>
        </div>
        <div className="price">
          <span>{this.props.price}</span>
        </div>
      </div>
    )
  }
}

При рендере компонента в this.props.price указывается стоимость товара:

ReactDOM.render(
  <React.StrictMode>
    <App />
    <Food price="20999" />
  </React.StrictMode>,
  document.getElementById('root')
);

Как можно реализовать функцию увеличения или уменьшения стоимости товара, при изменении его количества в поле input?

Answer 1

Просто изменяете стейт. Я Ваш state.prop заменил на state.count, добавил методы less и more изменения этого состояния, а также метод sum, для подсчета суммы в зависимости от количества (можно и без метода, но лучше с ним - дает возможность легкой манипуляции с данными)

class Food extends React.Component {
  constructor() {
    super();
    this.state = { 
      count: 1,
    }

    this.less = this.less.bind(this)
    this.more = this.more.bind(this)
    this.sum = this.sum.bind(this)
  }

  less() {
    this.setState(({count}) => ({count: count > 1 ? count - 1 : count}));
  }

  more() {
    this.setState(({count}) => ({count: count + 1}));
  }

  sum() {
    return this.props.price * this.state.count
  }

  render() {
    return (
      <div>
        <div className="count">
          <p>Количество</p>
          <button onClick={this.less}>-</button>
          <input value={this.state.count} />
          <button onClick={this.more}>+</button>
        </div>
        <div className="price">
          <span>{this.sum()}</span>
        </div>
      </div>
    )
  }
}

БЛОГ НА HUSL

Как в ReactJS взаимодействовать с props, которые были указаны при рендере компонента?

Ответы (1 шт):