Question

我有两个组件：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组件外部正确调用此方法？

Answer 1

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

Answer 2

您需要将toggleComponents作为道具传递给LeftMenu。

<LeftMenu toggleComponents = {this.toggleComponents}/>

然后，您可以在LeftMenu内部简单调用它，如下所示

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

Answer 3

您未在两个组件之间提供连接。就像我的（极简主义版本）

您有布局组件

class Layout extends Component {
  state = {
    isShowTiles: true
  };
  toggleComponents = () => {
    this.setState({
      isShowTiles: !this.state.isShowTiles
    });
  };
  render() {
    return (
      <div class="layout">
        <Main isShowTiles={this.state.isShowTiles} />
        <LeftMenu toggleComponents={this.toggleComponents} />
      </div>
    );
  }
}

在主要组件中：

class Main extends Component {
  render() {
    return (
      <div class="toggleArea">
        {this.props.isShowTiles ? "Title" : "Box Title"}
      </div>
    );
  }
}

和LeftMenu组件：

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

签出：https://codesandbox.io/s/943nkvzrno

Answer 4

import LeftMenu from 'leftMenu';
class Main extends Component{
    state ={
        isShowTiles:true
    };

    toggleComponents=()=>{
        this.setState({
            isShowTiles:!this.state.isShowTiles
        })
    }
    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>
                <LeftMenu toggleComponents={this.toggleComponents} />
            </div> 
        );
    }
}

export default Main;

左侧菜单组件：

class LeftMenu extends Component {
    render() {
        const { toggleComponents } = this.props;
        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;

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

4 个答案: