2017-08-18 4 views
0

Le problème est que mon Redux forme dans l'onglet react-bootstrap (en ProductReviewWidget) ne gère pas les événements - cases à cocher, react-dropzone, soumettant le formulaire lui-même, etc. Même onClick auditeurs n » t allumer.Fonctions non mise à feu dans l'élément-bootstrap réagir

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

Cependant, tout fonctionne très bien quand je me déplace hors de l'onglet d'amorçage comme ceci:

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

Je ne sais pas si cela aide. Mais, avez-vous essayé de déboguer '' et '' pour voir s'ils capturent les événements en premier lieu? Une raison à laquelle je peux penser est que le volet Tab ne propage pas l'événement à

Répondre

0

Vérifiez aussi vos styles, peut-être votre onglet est sur votre composant et il ne permet pas de Utilisez vos événements de composant ou de feu parce que vous cliquez ou quoi que ce soit sur votre onglet. En outre, vous pouvez essayer d'utiliser la propriété das z-index.

J'espère que vous pouvez trouver le problème