如何使用 React Hooks 更改购物车图标状态

Question

我有两个组件，一个将包含一个按钮，单击该按钮将触发购物车图标更改，而第二个组件将包含要更改的购物车图标。我已经试过了，但我没能做到这一点。Here is an image to explain better

组件 A

import React,{useState} from 'react'

const Cart = () => {
const [itemCount, setItemCount] = useState('');
return (
<div>
  <button
        style={{width: '10%', height: '10%', padding:'20px'}}
        onClick={() => {
          setItemCount(itemCount + 1);
        }}
      >
        {" "}
    </button>
</div>
)
}

export default Cart

组件 B

import React from 'react'
import Cart from './Cart'

const CartShow = (props) => {
return (
<div style={{border: '2px solid red', background: 'black', width: '30%', margin: '100px', 
padding: '30px'}}>
  <svg width="24" height="24" viewBox="0 0 24 24" fill="none" 
xmlns="http://www.w3.org/2000/svg">
    <path d="M9 22C9.55228 22 10 21.5523 10 21C10 20.4477 9.55228 20 9 20C8.44772 20 8 20.4477 
8 21C8 21.5523 8.44772 22 9 22Z" stroke="white" stroke-width="2" stroke-linecap="round" 
stroke-linejoin="round"/>
    <path d="M20 22C20.5523 22 21 21.5523 21 21C21 20.4477 20.5523 20 20 20C19.4477 20 19 
20.4477 19 21C19 21.5523 19.4477 22 20 22Z" stroke="white" stroke-width="2" stroke- 
linecap="round" stroke-linejoin="round"/>
    <path d="M1 1H5L7.68 14.39C7.77144 14.8504 8.02191 15.264 8.38755 15.5583C8.75318 15.8526 
9.2107 16.009 9.68 16H19.4C19.8693 16.009 20.3268 15.8526 20.6925 15.5583C21.0581 15.264 
21.3086 14.8504 21.4 14.39L23 6H6" stroke="white" stroke-width="2" stroke-linecap="round" 
stroke-linejoin="round"/>
  {props.itemCount}</svg>
    <Cart/>
</div>
)
}

export default CartShow

Answer 1

假设您的代码除了状态更改外都有效。以下应该有效（未测试）：

组件 A

const Cart = (props) => 
<div>
  <button
        style={{width: '10%', height: '10%', padding:'20px'}}
        onClick={() => props.setItemCount(props.itemCount + 1)}
      >
        {" "}
    </button>
</div>

export default Cart

组件 B

import React,{useState} from 'react'
import Cart from './Cart'

const CartShow = () => {
const [itemCount, setItemCount] = useState(0);
return (
<div style={{border: '2px solid red', background: 'black', width: '30%', margin: '100px', 
padding: '30px'}}>
  <svg width="24" height="24" viewBox="0 0 24 24" fill="none" 
xmlns="http://www.w3.org/2000/svg">
    <path d="M9 22C9.55228 22 10 21.5523 10 21C10 20.4477 9.55228 20 9 20C8.44772 20 8 20.4477 
8 21C8 21.5523 8.44772 22 9 22Z" stroke="white" stroke-width="2" stroke-linecap="round" 
stroke-linejoin="round"/>
    <path d="M20 22C20.5523 22 21 21.5523 21 21C21 20.4477 20.5523 20 20 20C19.4477 20 19 
20.4477 19 21C19 21.5523 19.4477 22 20 22Z" stroke="white" stroke-width="2" stroke- 
linecap="round" stroke-linejoin="round"/>
    <path d="M1 1H5L7.68 14.39C7.77144 14.8504 8.02191 15.264 8.38755 15.5583C8.75318 15.8526 
9.2107 16.009 9.68 16H19.4C19.8693 16.009 20.3268 15.8526 20.6925 15.5583C21.0581 15.264 
21.3086 14.8504 21.4 14.39L23 6H6" stroke="white" stroke-width="2" stroke-linecap="round" 
stroke-linejoin="round"/>
  {itemCount}</svg>
    <Cart itemCount={itemCount} setItemCount={setItemCount} />
</div>
)
}

export default CartShow

编辑：要在购物车上显示数字，请选中此 link：

Answer 2

由于 Cart 是 CartShow 的子组件，您应该将状态移动到 CartShow（或者有一个包含它们的不同父组件）。然后将函数向下传递给 Cart 以更新 itemCount

如何使用 React Hooks 更改购物车图标状态

How to change cart icon state using React Hooks

state

onclick

cart

reactjs

react-hooks