Question

我使用包裹在react-textarea-autosize中的styled-component，就像这样：

import React from 'react'
import styled from 'styled-components'
import TextareaAutosize from 'react-textarea-autosize'

const MyTextArea = styled(TextareaAutosize)``

function Component() {
  return (
    <MyTextArea innerRef={...} />
  )
}

我需要获取基础html textarea元素的引用。但是，要实现它，我需要：

可以通过TextareaAutosize'styled-components属性-innerRef

<MyTextArea innerRef={textareaResizeable => ...} />

可以通过textarea'react-textarea-autosize道具-inputRef

<TextareaAutosize inputRef={textarea => ...} />

我了解这两个单独的步骤。但是如何直接从textarea组件访问MyTextArea html元素？

Answer 1

我找到了答案here。因此，就我而言，解决方案如下所示：

import React from 'react'
import styled from 'styled-components'
import TextareaAutosize from 'react-textarea-autosize'

const MyTextArea = styled(
  ({_ref, ...props}) => <TextareaAutosize inputRef={_ref} {...props} />
)``

class Component extends React.Component {
  render() {
    return (
      <MyTextArea innerRef={node => this.textarea = node} />
    )
  }
}

然后在需要的地方使用this.textarea。

在ref中反应ref

1 个答案: