innerRef 到第三方组件

Question

我将 Redux Form 与样式化组件一起使用。

我想获取 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 是可以 "styled".

的 "rendering component"

但是，我认为您缺少的拼图是您需要将 a withRef prop 传递给 Field，这将使您能够使用 getRenderedComponent() 获得实际的 textarea 组件。类似于：

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

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

innerRef 到第三方组件

innerRef to third party component

reactjs

redux-form

react-redux

styled-components