时间戳

首页 > 解决方案 > 有没有办法可以从包装的组件更改父状态

reactjs - 有没有办法可以从包装的组件更改父状态

问题描述

我正在尝试实现一个下拉包装器。被 DropDownWrapper 包裹的元素预计会通过 onClick 切换下拉的显示。

class DropdownMenuWrapper extends React.Component {
constructor(props) {
    super(props);
    this.state = {
      active: true,
    };

    this.handleDropDownDisplay = this.handleDropDownDisplay.bind(this);
    this.displayDropDownItems = this.displayDropDownItems.bind(this);
  }

  displayDropDownItems(menuItems, onSelectMenuItem, children) {
    return (
      menuItems.map(item => (
        <a
          className={cx('navItem')}
          key={item.value}
          onClick={() => onSelectMenuItem(children)}
        >
         {item.logo}
         {item.display}
       </a>
     ))
   );
 }

  handleDropDownDisplay() {
    this.setState({
      active: !this.state.active,
    });
  }

  render() {
    const {
      className, menuItems, onSelectMenuItem, children, label,
    } = this.props;
    return (
      <div>
        {children}
        <nav className={className} aria-label={label}>
          {this.state.active && this.displayDropDownItems(menuItems, onSelectMenuItem, children)}
        </nav>
      </div>
    );
  }
}

export default DropdownMenuWrapper;

在这里，我想在下面的包装按钮上实现下拉切换

<DropdownMenuWrapper
  menuItems={[
    { value: 'dashboard', display: 'Dashboard' },
    { value: 'myProfile', display: 'My Profile' },
  ]}
>
  <Button />
</DropdownMenuWrapper>

在这种情况下，有没有办法可以使用 {children} onClick 来更改父组件（DropdownMenuWrapper）的状态？

标签： reactjs

解决方案

值得庆幸的是，这个问题已经在各种平台上得到了解决，包括这个。我想让你开始：

您可以通过其 props 将父组件中的函数向下传递给子组件，并从那里使用它来更改父组件的状态。

在父组件中定义的函数负责更新父组件的状态。然后子组件必须将函数绑定到发生在子组件中的事件，一旦事件被触发，函数就会发生在父组件中并执行它所实现的更改。

您可以在此处的现有答案中看到详细的代码实现：如何在 React 中更新父级的状态？. 如果这不是您想要的，请原谅我，在这种情况下，您应该让您的问题更清楚。

将来您应该尝试搜索现有的答案，因为问题很有可能已经解决。一个简单的搜索引擎搜索为我完成了这项工作，我喜欢将堆栈溢出标记为搜索查询的一部分，以获得更好的答案。

推荐阅读