如何使用從React中的子級獲取的數據更新父級組件中的狀態

Question

正如標題所指出的那樣顯而易見。

我有一個MenuContainer類組件，帶有一個menuList項表，我將它作為道具傳遞給一個子功能組件，該子組件將其映射到另一個子元素，該子元素吐出一個菜單。 沒什么好看的。
菜單僅顯示道具中的{icon}。
在這個父容器中，我還有另一個名為ItemName的子元素，該子元素應從狀態（默認為空字符串）傳遞itemName道具。

棘手的部分是，應使用我將鼠標懸停在Menu / MenuItem組件中的任何菜單項的{name}來更新this.state.itemName的值。
因此，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-ItemName

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

我的想法是，我應該使MenuItem成為一個類組件，並在其中創建一個將{name}傳遞給父級的方法，該方法將被getItemName方法攔截，然后更新狀態，但是我關於如何實現該目標的想法已經用盡。

我應該和Redux一起做嗎？ 或者，也許有一種更簡單的方法，我沒有想到？

Answer 1

1. 在父級中執行menuList.map(item) ，然后將menuList.map(item)在menuList.map(item)的回調傳遞給Menu。 該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>
    );