响应，将状态从子组件传递给父组件
我只是在学习，反应，遇到了一个问题。我正在制作一堆像这样的计数器组件：
问题是，我已经在每个计数器中定义了状态，即其中的3个，我希望将值(数字)传递给父级，这样我就可以将其加起来并显示总数。
这是我的子计数器组件：
import React, { useState } from "react";
const Counter = () => {
const [count, setcount] = useState(0)
const handleIncrement=()=>{
setcount(count+1);
}
const handleDecrement=()=>{
setcount(count+-1);
}
return (
<div>
<button onClick={()=>{handleIncrement()}}>+</button>
<span>{count}</span>
<button onClick={()=>{handleDecrement()}}>-</button>
</div>
);
};
export default Counter;下面是我想将值传递给的父类，这样我就可以将它们相加并显示总数：
import React from 'react'
import Counter from './Counter'
const Counters = () => {
return (
<>
<h3>totalcount:</h3>
<Counter/>
<Counter/>
<Counter/>
</>
)
}
export default Counters我尝试的是建立多个状态，但我找不到一个很好的方法来实现这个。我知道这有一个简单的答案，我把它弄得太复杂了。如果你们对我的代码有其他优化，请分享。
回答 1
Stack Overflow用户
发布于 2022-05-19 20:41:32
在“反应”中，state自上而下。如果父组件中定义的函数已作为state传递给父组件，则嵌套组件可以更新父组件的props。这意味着，在设置代码时，您想要做的事情是不可能的。实现你想要的目标的一种方法是：
- 将
setCounter作为props传递给每个Counter实例，如下所示：
import，{ useState }从‘./计数器’导入计数器= () => { const countOne，setCountOne = useState(0) const countTwo，setCountTwo = useState(0) const countThree，setCountThree = useState(0)返回( <>总计数：{countOne + countTwo countThree} )}导出默认计数器
- 从
propsinsideCounter中获取setCounter并在您想要的地方使用：
导入React，{ useState }从"react"；const计数器= ({count，setCount}) => { const handleIncrement=()=>{ setCount(count+1)；} const handleDecrement=()=>{ setCount(count+-1)；}返回(<按钮onClick={()=>{handleIncrement()}}>+ {count} {handleDecrement()}}>- )；}；导出默认计数器；}
https://stackoverflow.com/questions/72310752
复制相似问题
腾讯云开发者
