在 react-bootstrap 元素中未触发的函数答案

【问题标题】：Functions not firing within react-bootstrap element在 react-bootstrap 元素中未触发的函数
【发布时间】：2017-08-18 09:09:33
【问题描述】：

问题是我在react-bootstrap 选项卡（在ProductReviewWidget）内的redux-form 不处理任何事件——复选框、react-dropzone、提交表单本身等等。甚至onClick 听众也没有t火起来。

render() {
  const { product, reviews, questions } = this.props;
  const productId = product.num_iid;
  let reviews_count = 0;
  for (let i = 0; i < (reviews[productId] || []).length; i++){
    if(!reviews[productId][i].only_vote){
      reviews_count ++;
    }
  }
  return (
    <div>
      <Tab.Container activeKey={this.state.activeTab} onSelect={this.setActiveTab} id="main_tab">
        <div className='text-center clearfix'>
          <Nav bsStyle="pills" bsClass='flex-container flex-start'>
            <NavItem eventKey="review" className="flex-item product-tab-link-item">
              Reviews ({(reviews_count)})
            </NavItem>
          </Nav>
          <Tab.Content className="clearfix" animation data-toggle={"tab"} unmountOnExit={true} id="inner_tab">
            <Tab.Pane eventKey="review" unmountOnExit={true}>
              <ProductReviewWidget product={product} translations={this.props.translations} getTranslation={this.props.getTranslation}/>
            </Tab.Pane>
          </Tab.Content>
        </div>
      </Tab.Container>
    </div>
  );
}

但是，当我将其移出引导选项卡时，一切正常：

render() {
  const { product, reviews, questions } = this.props;
  const productId = product.num_iid;
  let reviews_count = 0;
  for (let i = 0; i < (reviews[productId] || []).length; i++){
    if(!reviews[productId][i].only_vote){
      reviews_count ++;
    }
  }
  return (
    <div>
      <ProductReviewWidget product={product} translations={this.props.translations} getTranslation={this.props.getTranslation}/>
    </div>
  );
}

【问题讨论】：

我不确定这是否有帮助。但是，您是否尝试过调试 <Tab.Content> 和 <Tab.Pane> 以查看它们是否首先捕获了事件？我能想到的一个原因是选项卡窗格没有将事件传播到

标签： javascript reactjs redux redux-form react-bootstrap

【解决方案1】：

还要检查您的样式，也许您的选项卡在您的组件上，并且它不允许使用您的组件或触发事件，因为您正在单击或您的选项卡上的任何内容。此外，您可以尝试使用 das 属性 z-index。

希望你能找到问题

【讨论】：