如何在 ReactJS 中将数量从一个组件传递到另一个组件，其中它们是独立的但位于同一个父级中

Question

I have the following class Component that is handling some quantity changes an updating the price of a sku from stripes API.

The crux of the issue is that I need the quantity for the sku inside the Cart component, but the quantity state is handled inside the Product component, and it needs to be separate because you can change the sku in the dropdown menu and the product will change state, so if the cart component is in the product then the state clears and is not persistent. Also I will need a way for the cart to add to the state instead of just replacing it on setSkuObject not sure if that's possible either

Any help would be greatly appreciated

Product component

  class Product extends React.Component {
    constructor(props) {
      super(props)
  
      this.state = {
        stripe: null,
        quantity: 1,
        price: props.price,
        skuObject: null,
      }
  
      this.handleInputChange = this.handleInputChange.bind(this)
    }
    
  
    handleInputChange(event) {
      const target = event.target
      const { quantity } = this.state
      const { price } = this.props
  
  
      this.setState({
        quantity: parseInt(target.value),
      })
      this.setState({
        price: price * parseInt(target.value),
      })
    }
  
    render() {
      const { id, currency, name, productId } = this.props
      const { quantity, price, skuObject } = this.state
  
      //console.log(quantity);
  
      const priceFloat = (price / 100).toFixed(2)
      const formattedPrice = Intl.NumberFormat("en-US", {
        style: "currency",
        currency,
      }).format(priceFloat)
  
      return (
        <>
          <form className="name-buy">
            <label>
              Quantity
              <input
                type="number"
                name="amount"
                min="1"
                value={this.state.quantity}
                onChange={this.handleInputChange}
              />
            </label>
          </form>
          <form
            className="submit"
            onSubmit={this.handleSubmit(id, productId, quantity)}
          >
            <div>
              <h2>
                {name} ({formattedPrice})
              </h2>
              <button type="submit">Buy Now</button>
            </div>
          </form>
        </>
      )
    }
  }

cart class component

class Cart extends React.Component {
  constructor(props) {
    super(props)
    this.state = {
      sku: null,
      quantity: null,
    }
  }
  render() {
    const { skuObject } = this.props
    return <CartBox>Cart {skuObject} {/*would like to have quantity here*/} </CartBox>
  }
}

It lives inside A StoreDetails functional component

const StoreDetails = ({ data, location }) => {
    const setSkuOnce = data.allDatoCmsStore.edges.map(
      ({ node: product }, index) => {
        if (product.defaultProduct === true) {
          //console.log(product.skuId);
          return product.skuId
        }
      }
    )
  
    //console.log(setSkuOnce)
  
    var filtered = setSkuOnce.filter(function(el) {
      return el != null
    })
  
    const [value, setValue] = useState({
      skuId: filtered[0],
    })
  
    const run = event => {
      //console.log(event);
      setValue({ skuId: event })
    }
  
    const [skuObject, setSkuObject] = useState()
    const handleCart = (sku, productId, quantity) => {
      return event => {
        event.preventDefault()
        setSkuObject(sku)
      }
    }
  
    return (
      <Layout>
        <StoreHero>
          <Link to="/store">
            <BsArrowLeft />
            Back
          </Link>
          <Alert test="test" hello="hello" hash={location.hash} />
  
          {/* <ShowItem props={data}/> */}
  
          <Cart skuObject={skuObject} />
  
          {data.allDatoCmsStore.edges.map(({ node: sku }) => (
            <React.Fragment key={sku.skuId}>
              {value.skuId === sku.skuId ? (
                <ProductGrid>
                  <Img fluid={sku.image.fluid} />
                  <ProductCol>
                    <h1>{sku.productTitle}</h1>
                    <FirstThreeWrap>
                      <form className="variant">
                        <label>
                          <span>Product Variant</span>
                          <select
                            value={value.skuId}
                            onChange={event => run(event.target.value)}
                          >
                            {data.allDatoCmsStore.edges.map(({ node: sku }) => (
                              <React.Fragment key={sku.skuId}>
                                <option value={sku.skuId}>{sku.title}</option>
                              </React.Fragment>
                            ))}
                          </select>
                        </label>
                      </form>
  
                      {/* <ShowItem setValue={setValue}/> */}
                      <Product
                        key={sku.id}
                        id={sku.skuId}
                        productId={sku.productId}
                        currency="cad"
                        price={sku.price}
                        name={sku.title}
                      />
                      <button onClick={handleCart(sku.skuId, sku.productId)}> {/* I NEED TO PASS THE QUANTITY IN HERE */}
                        Add to Cart
                      </button>
                    </FirstThreeWrap>
                    <div
                      className="description"
                      dangerouslySetInnerHTML={{ __html: sku.productDescription }}
                    />
                    <QuestionForm skuId={sku.skuId} name={sku.title} />
                  </ProductCol>
                </ProductGrid>
              ) : null}
            </React.Fragment>
          ))}
        </StoreHero>

      </Layout>
    )
  }

Answer 1

If I've parsed all this correctly, then it would seem you could achieve it by simply moving the "Add To Cart" button inside Product . I can't see any reason not to as they are rendered one after the other and use exactly the same data from the map function. You would just pass the handler down like so:

<Product
  key={sku.id}
  id={sku.skuId}
  productId={sku.productId}
  currency="cad"
  price={sku.price}
  name={sku.title}
  handleCart={handleCart}
/>

And then in Product render it like this:

return (
  <>
    <form>
      ...
    </form>
    <button onClick={() => this.props.handleCart(id, productId, this.state.quantity)}>
      Add to Cart
    </button>
  </>
)