首页 文章

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

提问于
浏览 次
0

很明显， Headers 表明它不是 .

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

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

Parent - 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} />
      </>
    )
  }
}

Child 1 - Menu

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

Child 2 - MenuItem

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

Child 3 - ItemName

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

我的想法是我应该让MenuItem成为一个类组件，并在其中创建一个方法，将传递给父级，在那里它将被getItemName方法拦截，然后getItemName方法将更新状态，但是我已经没有关于如何实现这一点的想法 .

我应该用Redux做这件事吗？或者也许有一种更简单的方式，我没想到？

javascript reactjs ecmascript-6

2 回答

  • 0

    MenuContainer

    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} />
          </>
        )
      }
    }

    Menu

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

    MenuItem

    const MenuItem = ({ name, icon ,onMouseOverEvent}) => (
      <div data-item-name={name}
 onMouseOver={()=>onMouseOverEvent(name)}>//used to call onMouseOver Event
        {icon}
      </div>
    );
    回复于
  • 0

    • 在父级中执行 menuList.map(item) ，并将项目悬停时将调用的回调传递给Menu . 此callBack将该项目作为参数 .

    • 更改 Menu 以仅显示一个菜单项 . 当该项目悬停时，将以项目作为参数调用回调 . 设置将保存此项目的状态变量 .
      将使用此状态变量调用

    • menuItem .

    回复于

相关问题