Question

我需要使用四个按钮在同一页面上显示不同元素以对其进行过滤。如果我单击NavigationBar组件的第一个按钮，则必须显示一个特定的div。

我有一个必须显示不同元素的主页：

class Home extends Component {

  constructor(props) {
    super(props);
  }

  showContent() {
    alert('ok');
  }

  render() {
    return (
      <div className="container">
        <Header activeLink={['home']}/>
        <p>Some texte here</p>
        <NavigationBar onClick={this.showContent} firstSection="L'entreprise" secondSection="Pourquoi nous choisir ?"/>
        <Footer/>
      </div>
    );
  }
}

export default Home;

我的NavigationBar组件有四个按钮：

class NavigationBar extends Component {

  constructor(props) {
    super(props);
  }

  render() {
    return (
      <div className="navigation-bar flex row between">
        <div onClick={() => {this.props.onClick()}}>
          <p>{this.props.firstSection}</p>
        </div>
        <div onClick={() => {this.props.onClick()}}>
          <p>{this.props.secondSection}</p>
        </div>
        <div onClick={() => {this.props.onClick()}}>
          <p>{this.props.thirdSection}</p>
        </div>
        <div onClick={() => {this.props.onClick()}}>
          <p>{this.props.fourthSection}</p>
        </div>
      </div>
    );
  }
}

export default NavigationBar;

使用此代码，当我点击NavigationBar组件的div时，我可以显示警告（'ok'），但我不知道如何识别单击了什么div。如果我知道如何做到这一点，我可以轻松地显示特定元素。谢谢您帮忙。

Answer 1

onClick处理程序将为您提供一个事件对象。将该事件对象传递回public myAPI(){ return restAPI.call() .flatmap{ ret -> if(ret == success) return myPublishSubject }。您还可以向元素添加标识信息：

showContent

然后：

<div data-key="foo" onClick={e => this.props.onClick(e)}>

根据按钮显示特定元素

1 个答案: