0

我将 Redux Form 与 Styled Components 一起使用。

我想获得 Redux 表单字段的 ref，所以我可以在某些条件下集中它。

代码看起来像：（有点简化）

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值未定义。有没有办法访问 reftextArea并在必要时集中注意力？

（FormLabel也是一个样式化的组件，但没有必要为问题显示它）

提前致谢。

4

1 回答 1

1

哇！我写了redux-form，我很喜欢styled-components，但我从来没有想过这样做styled(Field)。这很疯狂，因为我不认为Field是可以“样式化”的“渲染组件”。

但是，我认为您缺少的拼图是您需要将道具传递给，withRefField然后您可以使用它getRenderedComponent()来获取实际textarea组件。就像是：

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

我这里只是推测。我自己从未尝试过这种模式。

于 2017-08-15T21:33:23.403 回答