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

问题描述

我有一个带有 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

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

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

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

问题描述

解决方案

推荐阅读