javascript - 在 React 中基于 props 和来自 child 的 onClick 更新父状态

Question

我正在用 React 构建一种购物车。我在子组件中设置了一些 Prop ，然后在父组件中使用它们时将状态传递给它们。有几件事我想做，但首先我想在按下按钮时更新项目的数量。我知道如果所有代码都在父组件中进行编码，这将如何工作，但我正在尝试创建一个子组件以使代码更高效并弄清楚组件如何相互交互。
child的props可以在这里用onClick事件来操作，用来改变不同事物的状态吗？
如果是这样，我该怎么做？
是否有一种合乎逻辑的创建方法，或者是否有更简单的方法？
我知道 Redux 使用状态管理，但我现在想在 React 中解决这个问题。

class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      applesCount: 0,
      orangesCount: 0,
      peachesCount: 0,
      grapesCount: 0,
      applesPrice: 0.00,
      orangesPrice: 0.00,
      peachesPrice: 0.00,
      grapesPrice: 0.00
    }
  }
  
  render() {
    return (
      <>
      <h1 className="text-center">Grocery Store</h1>
      <div className="row text-center m-2">
        <div className="col border border-primary m-2">
          <Item fruitName='Apples' quantity={this.state.applesCount} price={this.state.applesPrice}/>
        </div>
        <div className="col border border-primary m-2">
          <Item fruitName='Oranges' quantity={this.state.orangesCount} price={this.state.orangesPrice}/>
        </div>
        <div className="col border border-primary m-2">
          <Item fruitName='Peaches' quantity={this.state.peachesCount} price={this.state.peachesPrice}/>
        </div>
        <div className="col border border-primary m-2">
          <Item fruitName='Grapes' quantity={this.state.grapesCount} price={this.state.grapesPrice}/>
        </div>
      </div>
      </>
    )
  }
}

class Item extends React.Component {
  render() {
    return (
      <>
      <h1>{this.props.fruitName}</h1>
      <div>picture here</div>
      <div className="row d-flex justify-content-center">
        <button>-</button>
        <h1>{this.props.quantity}</h1>
        <button>+</button>
      </div>
      <h2>${this.props.price}</h2>
      </>
    )
  }
}

export default App;

Answer 1

将回调传递给 child 。

const Parent = () => {
  const [value, setValue] = useState('')

  return <Child setValue={setValue}/>
}

...

const Child = ({setValue}) => {
  // use setValue here which will update parent state
}