reactjs - innerRef to third party component -


i'm using redux form styled components.

i ref of redux form field, can focus in conditions.

the code looks like: (a little bit simplified)

export const someform = () => (   <form onsubmit={handlesubmit} >     <formlabel htmlfor="comment">comment:</formlabel>     <commenttextarea       name="comment"       component="textarea"       maxlength="250"       innerref={commentbox => this.commentbox = commentbox}     />   </form> ); 

where commenttextarea styled component such:

const commenttextarea = styled(field)`   background-color: grey;   border-radius: 3px;   color: black;   height: 6.5rem;   margin-bottom: 1rem; `; 

the problem innerref's this value undefined. there way access ref of textarea , focus when necessary?

(formlabel styled component, not necessary show problem)

thanks in advance.

wow! wrote redux-form , adore styled-components, never occurred me styled(field). that's pretty wild, don't consider field "rendering component" can "styled".

however, think puzzle piece missing need pass a withref prop field, enable use getrenderedcomponent() actual textarea component. like:

<commenttextarea   name="comment"   component="textarea"   maxlength="250"   withref   innerref={commentbox => this.commentbox = commentbox.getrenderedcomponent()} /> 

i'm conjecturing here. i've never attempted pattern myself.


Comments

Popular posts from this blog

android - InAppBilling registering BroadcastReceiver in AndroidManifest -

python Tkinter Capturing keyboard events save as one single string -

sql server - Why does Linq-to-SQL add unnecessary COUNT()? -