Question

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

这是我的父组件（称为事件）的一部分（请注意，子组件位于数组中）：

{
  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>
      )
  )
}

Answer 1

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

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

从具有3个对象的组件从子代传递到父代

1 个答案: