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
Post a Comment