时间戳

首页 > 解决方案 > 如何从其他组件调用方法以使 onClick 选项工作

reactjs - 如何从其他组件调用方法以使 onClick 选项工作

问题描述

我有两个组件：Main 和 LeftMenu。LeftMenu 组件上有一个图标。所需功能：单击图标将显示/隐藏主组件中的元素。

将 FaDropbox 图标添加到主组件时，我可以设置所需的功能。但是当我试图将它放入 LeftMenu 组件时，它不起作用。

FaDropbox 图标工作的主要组件：

class Main extends Component {
  state = {
    isShowTiles: true
  };

  render() {
    return (
      <div className="Main">
        {/* Background color set with Helmet */}
        <Helmet>
          <style>{"body { background-color: #1A2C3B; }"}</style>
        </Helmet>
        <div className="Container">
          <Row className="RowHeader">
            <Header
              user={this.props.user}
              photo={this.props.photo}
              userProfile={this.props.userProfile}
            />
          </Row>
          <Row>
            <div class="toggleArea">
              {this.state.isShowTiles ? <Tiles /> : <BoxTiles />}
            </div>
          </Row>
        </div>
        <button onClick={this.toggleComponents}>
          <FaDropbox />
        </button>
      </div>
    );
  }

  toggleComponents = () => {
    this.setState({
      isShowTiles: !this.state.isShowTiles
    });
  };
}

export default Main;

当我尝试从 FaDropbox 图标上的 LeftMenu 组件调用 toggleComponents 时，它不起作用。

class LeftMenu extends Component {
  render() {
    return (
      <div className="LeftMenu">
        {/* Base Layout */}
        <div className="LeftContainer">
          <Row className="justify-content-md-center">
            <div className="LeftIcon">
              {/* <FaDropbox/> */}
              <button onClick={toggleComponents}>
                <FaDropbox />
              </button>
            </div>
          </Row>
        </div>
      </div>
    );
  }
}

export default LeftMenu;

我试图从 Main 组件中导出 toggleComponents 方法，如下所示，但它不起作用：

export function toggleComponents() {
  return this.toggleComponents;
}

预期的结果是使 FaDropbox 图标具有 onClick 选项，但在 LeftMenu 组件上。我不想在主要组件上有 FaDropbox。如何实现这一点并从 Main 组件外部正确调用此方法？

标签： reactjs

解决方案

向 LeftMenu 类添加一个 toggleComponents 函数，并以与 Main 中相同的方式使用它

<button onClick={this.toggleComponents}><FaDropbox/></button>

记住this课堂上的绑定： https ://reactjs.org/docs/handling-events.html

您还可以将toggleComponents函数传递给LeftMenu

<LeftMenu toggleComponents={this.toggleComponents} />

class LeftMenu extends Component {
  render() {
    return (
      ...
      <button onClick={this.props.toggleComponents}><FaDropbox/></button>
    )
  }
}

推荐阅读