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