从具有 3 个对象的组件从子级传递到父级答案

【问题标题】：Passing from child to parent from a component with 3 objects从具有 3 个对象的组件从子级传递到父级
【发布时间】：2019-10-25 21:24:25
【问题描述】：

我有一个带有 2 个按钮和 1 个输入文本的组件。按钮 1 减少项目，按钮 2 增加项目到输入。当我减少/增加一个项目时，我需要从输入中获取值。减少/增加它的工作，但我不能（我不知道如何）获得父组件中的值。这是我的子组件，名为 ChooseQuantity：

import React, { Component } from 'react';
import './ChooseQuantity.css';

class ChooseQuantity extends Component{
    constructor(props){
        super(props);
    }
    state = {
        qtd: 0,
    }
    addItem(){
        this.setState({qtd: this.state.qtd + 1 });
    }
    removeItem(){
        if(this.state.qtd > 0){
            this.setState({qtd: this.state.qtd - 1 });
        }
    }
    render() {
        return(
            <div>
                <button className="minus" onClick={() => this.removeItem()}>
                    <i className="fas fa-minus"></i>
                </button>
                <input className="qtd" type="text" value={this.state.qtd} name='qtd' onChange={this.props.action} onInput={(e) => this.setState({ choose_quantity: e.target.value })} readOnly />
                <button className='plus' onClick={() => this.addItem()} >
                    <i className="fas fa-plus"></i>
                </button>
            </div>
        )
    }
}

export default ChooseQuantity;

这是我的父组件的一部分，命名为 Event（注意子组件在一个数组中）：

{
  this.state.tickets.map((ticket, i) => (
      <div key={i}>
          <div className="row">
              <div className="col">
                  <h3 className="ticket-name">{ ticket.name }</h3>
              </div>
          </div>
          {ticket.lot.map((lot, j) => 
              <div className="row" key={i}>
                  <div className="col-8">
                      <h5 className="lot-name">{ lot.name }</h5>
                      <h6 className="lot-price">
                          R$ { lot.price.replace('.', ',') } <br />
                          <small>(R$ { lot.price.replace('.', ',') } + R$ { lot.price_tax.replace('.', ',') })</small>
                      </h6>
                  </div>
                  <div className="col-4">
                      <ChooseQuantity />
                      {this.state.qtd}
                  </div>
              </div>
          )}
          <hr />
      </div>
      )
  )
}

【问题讨论】：

标签： reactjs

【解决方案1】：

您应该将状态“提升”到一个共同的父级，该父级处理逻辑并将onAddItem、onRemoveItem 和value 等处理程序传递到您的按钮和输入。

有关提升状态的详细信息，请参见此处：https://reactjs.org/docs/lifting-state-up.html

【讨论】：