javascript - Functions not firing within react-bootstrap element -
the issue redux-form inside react-bootstrap
tab (in productreviewwidget
) doesn't handle events - checkboxes, react-dropzone
, submitting form itself, etc. onclick
listeners don't fire up.
render() { const { product, reviews, questions } = this.props; const productid = product.num_iid; let reviews_count = 0; (let = 0; < (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> ); }
however, works fine when move out of bootstrap tab so:
render() { const { product, reviews, questions } = this.props; const productid = product.num_iid; let reviews_count = 0; (let = 0; < (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> ); }
check styles also, maybe tab on component , doesn't allow use component or fire events because clicking or whatever on tab. also, can try using das property z-index.
i hope can find problem
Comments
Post a Comment