时间戳

首页 > 解决方案 > 反应相同的组件通信

javascript - 反应相同的组件通信

问题描述

早上好，

我正在创建一个反应应用程序，这个应用程序将有四个“面”，每面可以有不同的值，所以我映射了相同的组件 4 次：

:[...Array(item)].map((data) =>
          <Side 
           key={ data }
           Style='wall-holder' 
           InputClass='input-height' 
           />
      )
 }

因此，每一面都可以作为自己的东西工作，在每一面，用户都可以使用 Side 组件中存在的输入输入一个特定的值：

Side Component= input= 1, input =2;
Side Component= input=3, input =5;
Side Component= input=3, input =5;
Side Component= input=3, input =5;

注意：只有一个组件侧，我只映射了 4 次，所以我可以重复使用它

现在我希望能够在数组或对象中获取所有这些输入，以便添加所有输入值，但是当我尝试使用 api 上下文将其发送到全局状态时，它只保留最后添加的值，我明白为什么会发生这种情况（有点），但我还不知道如何解决这个问题

标签： javascriptreactjs

解决方案

在父组件中保持状态，如下所示。使用 index 更新 Side 组件的每个输入状态。

import {useState} from "react";

const ParentComp = () => {
    const [state, setState] = useState({});
    
    return [...Array(item)].map((data, dataIndex) =>
          <Side 
           key={ data }
           Style='wall-holder' 
           InputClass='input-height' 
           setState={setState}
           dataIndex={dataIndex}
           />
      )
 }

在你的Side组件中。

<input
    onChange={e =>
        props.setState(prevState => {
            return { ...prevState, [props.dataIndex]: e.target.value };
        })
    }
/>;

推荐阅读