函數未在react-bootstrap元素內觸發

Question

問題是我的react-bootstrap選項卡（位於ProductReviewWidget ）中的redux表單無法處理任何事件-復選框， react-dropzone ，提交表單本身等。即使onClick偵聽器也不會啟動。

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

Answer 1

還檢查您的樣式，可能您的選項卡在組件上，並且不允許使用組件或觸發事件，因為您單擊或在選項卡上執行任何操作。 另外，您可以嘗試使用das屬性z-index。

我希望你能找到問題