第三者コンポーネントへのinnerRef

Question

私はReduxフォームをStyled Componentsと共に使用しています。

私はReduxフォームフィールドのリファレンスを取得したいので、特定の条件に絞ることができます。 （簡略化された少し）

export const SomeForm =() => (
    <form onSubmit={handleSubmit} > 
    <FormLabel htmlFor="comment">Comment:</FormLabel> 
    <CommentTextArea 
     name="comment" 
     component="textArea" 
     maxLength="250" 
     innerRef={commentBox => this.commentBox = commentBox} 
    /> 
    </form> 
); 

CommentTextAreaは、のようなスタイルの成分である：

コードのようなものに見える

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

問題があることをinnerRefのthis値定義されていません。 textAreaのリファレンスにアクセスし、必要なときにフォーカスする方法はありますか？

（FormLabelは、問題のためにそれを表示するために必要なもスタイルのコンポーネントですが、ありません）事前に

感謝。

Answer 1

うわー！私はredux-formと私はstyled-componentsを崇拝しましたが、それは私には起こったことはありませんstyled(Field)。 Fieldは「スタイル付け」することができる「レンダリングコンポーネント」とは考えていないので、かなり野生です。

はしかし、私はあなたが不足しているパズルのピースが、あなたは、あなたが実際textareaコンポーネントを取得するためにgetRenderedComponent()を使用できるようになりますFieldからa withRef propを渡す必要があるということだと思います。次のようなもの：

<CommentTextArea 
    name="comment" 
    component="textArea" 
    maxLength="250" 
    withRef 
    innerRef={commentBox => this.commentBox = commentBox.getRenderedComponent()} 
/> 

私はちょうどここに推測しています。私はこのパターンを自分自身で試みたことはありません。