Question

我正在使用Redux Form和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的{{1}}值未定义。有没有办法访问this的参考并在必要时关注它？

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

提前致谢。

Answer 1

哇！我写了redux-form并且我崇拜styled-components，但我从未想过styled(Field)。这是非常疯狂的，因为我不认为Field是一个可以“设计”的“渲染组件”。

但是，我认为您缺少的拼图是您需要将a withRef prop传递给Field，然后才能使用getRenderedComponent()来获取实际{{1} }} 零件。类似的东西：

textarea

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

innerRef到第三方组件

1 个答案: