问响应，将状态从子组件传递给父组件
EN

Stack Overflow用户

提问于 2022-05-19 12:30:54

回答 1查看 913关注 0票数 3

我只是在学习，反应，遇到了一个问题。我正在制作一堆像这样的计数器组件：

问题是，我已经在每个计数器中定义了状态，即其中的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

我尝试的是建立多个状态，但我找不到一个很好的方法来实现这个。我知道这有一个简单的答案，我把它弄得太复杂了。如果你们对我的代码有其他优化，请分享。

reactjs

state

react-functional-component

javascript

回答 1

Stack Overflow用户

回答已采纳

发布于 2022-05-19 12: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} )}导出默认计数器

从props inside Counter中获取setCounter并在您想要的地方使用：

导入React，{ useState }从"react"；const计数器= ({count，setCount}) => { const handleIncrement=()=>{ setCount(count+1)；} const handleDecrement=()=>{ setCount(count+-1)；}返回(<按钮onClick={()=>{handleIncrement()}}>+ {count} {handleDecrement()}}>- )；}；导出默认计数器；}

票数 1

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/72310752

复制

iframe怎么将参数传递给vue 父组件

data iframe message 事件数据

在子页面的iframe中想将参数传递给Vue父组件，可以使用postMessage()方法将数据发送给父窗口。父组件可以通过监听message事件来接收并处理这些数据。

王小婷

2023/08/10

1.4K0

react 子组件向父组件传值_vue父组件给子组件传值