web-dev-qa-db-ja.com

Reactで 'ref'を使用すると、スタイル付きコンポーネントが機能しない

スタイル付きコンポーネントでrefsを使用できません。以下のようなクラスメソッドでそれらにアクセスしようとすると、次のエラーが発生します。

Edit.js：42 Uncaught TypeError：this ..... containsは関数ではありません

  constructor(props) {
    ....
    this.setWrapperRef = this.setWrapperRef.bind(this);
    this.handleClickOutside = this.handleClickOutside.bind(this);
   }
----------
  setWrapperRef = (node) => {
    this.wrapperRef = node;
  }
  handleEdit = (e) => {
    e.preventDefault();
    this.props.onEdit(this.props.id, this.state.title);
  }
----------
<Wrapper onSubmit={this.handleEdit} ref={this.setWrapperRef}>
  ...
</Wrapper>

この質問 からコードを見つけました

ここで何が悪いのですか？

javascriptreactjsdomrefstyled-components
8
nikjohn

自分で答えを見つけました。解決策は、innerRef自体がDOMノードではなくスタイル付きコンポーネントを指すため、refではなくrefを使用することです。

詳細な議論は GitHub で見つけることができます

16
nikjohn