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

Question

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

我有一个 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 做这个吗？或者也许有一个更简单的方法，但我没有想到？

Answer 1

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

Answer 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>
    );