如何使用从 React 中的子组件获取的数据更新父组件中的状态

Posted 2023-02-23

【中文标题】如何使用从 React 中的子组件获取的数据更新父组件中的状态

【英文标题】：How to update state in parent component with data taken from child in React

【发布时间】：2018-09-13 20:49:38

【问题描述】：

正如标题所说的那样显而易见。

我有一个 MenuContainer 类组件，其中包含一个 menuList 项目表，我将其作为道具传递给一个子功能组件，该组件将其映射到另一个子元素，该子元素吐出一个菜单。这没什么特别的。 菜单仅呈现来自道具的 icon。 在这个父容器中，我还有另一个名为 ItemName 的子元素，它应该从 state 传递 itemName 道具（默认为空字符串）。

棘手的部分是 this.state.itemName 的值应该使用我将鼠标悬停在 Menu/MenuItem 组件中的任何菜单项的 name 进行更新。 因此，MenuItem 组件仅使用图标呈现，当我将鼠标悬停在它们上时，我需要将 name（来自 menuList 表）显示在 ItemName 组件中。

父级 - MenuContainer

class MenuContainer extends Component 
  constructor(props) 
    super(props);

    this.state = 
      itemName: ''
    ;
  ;

  menuList = [
    name: 'chat', icon: 'talking-heads',
    name: 'people', icon: 'loads-of-heads',
    name: 'settings', icon: 'cogwheel',
    name: 'potatoes', icon: 'one-huge-potato'
  ];

  getItemName = () => 
    this.setState( itemName: *menuList.name of the menu item that I hover over* )
  

  render() 
    return(
      <>
        <Menu menuList=this.menuList />
        <ItemName itemName=this.state.itemName />
      </>
    )
  

儿童 1 - 菜单

const menu = (menuList) => (
  <>
    menuList.map((item) => (
      <MenuItem ...item menuList=menuList key=item.name />
    ))
  </>
);

孩子 2 - MenuItem

const menuItem = ( name, icon ) => (
  <div data-item-name=name>
    icon
  </div>
);

孩子 3 - 物品名称

const itemName = (itemName) => (
  <p> itemName </p>
);

我的想法是，我可能应该将 MenuItem 设为一个类组件，并在其中创建一个将 name 传递给父级的方法，在那里它将被 getItemName 方法拦截，然后更新状态，但我对如何实现这一点没有任何想法。

我应该用 Redux 做这个吗？或者也许有一个更简单的方法，但我没有想到？

【问题讨论】：

恕我直言，redux 会这样做。

【参考方案1】：

在父级中执行menuList.map(item)，并传递给菜单a 将在项目悬停时调用的回调。这 callBack 将项目作为参数。 将Menu 更改为仅显示一个菜单项。当该项目悬停时，将使用该项目作为参数调用回调。设置将保存此项目的状态变量。 将使用此状态变量调用 menuItem。

【参考方案2】：

菜单容器

class MenuContainer extends Component 

  onMouseOverEvent(name)
    this.setState( itemName: name )
  
  render() 
    return(
      <>
        <Menu
 menuList=this.menuList  
onMouseOverEvent = this.onMouseOverEvent/> //passed event hanlder onMouseOverEvent
            <ItemName itemName=this.state.itemName />
          </>
        )
      
    

菜单

    const Menu = (menuList,onMouseOverEvent) => (
      <>
        menuList.map((item) => (
          <MenuItem ...item menuList=menuList key=item.name  
onMouseOverEvent=onMouseOverEvent/> //passed onMouseOverEvent as it is here 
        ))
      </>
    );

菜单项

    const MenuItem = ( name, icon ,onMouseOverEvent) => (
      <div data-item-name=name
 onMouseOver=()=>onMouseOverEvent(name)>//used to call onMouseOver Event
        icon
      </div>
    );

【讨论】：

这个！从字面上看，我离自己解决这个问题只差一个字。我忘了传递参数“名称”（呃）。谢谢！ :)

@NorweskiDrwal 不错，请点赞。如果它对你有用