Question

问题是我的react-bootstrap标签中的redux-form（ProductReviewWidget）并不处理任何事件 - 复选框，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。

我希望你能找到问题

函数不在react-bootstrap元素中触发

1 个答案: