react.jsイベントリスナーが反応しない反応する要素

Question

反応する（ラジオボタン）によってレンダリングされないDOMリスナーをイベントリスナーに追加するのがベストプラクティスです。 私は与えられたHTMLフォームを持っています。 jQueryのajaxを使用する代わりにreact.jsの利点を利用したいと思います。私はそのようなことだろうjQueryを使って

：私はこのようなものを使用すべき

$('input[type=radio][name=bedStatus]').change(function() {....} 

は（反応）

componentDidMount: function() { 
    if (this.props.onWindowScroll) window.addEventListener("scroll", this.handleScroll); 
}, 

componentWillUnmount: function() { 
    if (this.props.onWindowScroll) window.removeEventListener("scroll", this.handleScroll); 
} 

誰かが正しい方向に私をプッシュしてもらえますか？あなたのコンポーネントによって作成された要素を反応させるために乾杯甲斐

Answer 1

：ベストプラクティスの

render() { 
    return (
    <div> 
     <input type="radio" onChange={this.handleChange} /> 
    </div> 
) 
} 

の用語では、通常、非反応する要素は、windowかdocumentでなければなりません。それがHTML要素の場合、恐らくそれは反応コンポーネントにラップされ、イベントリスナーは上記のようにする必要があります。

反応しない要素については、あなたのアプローチは非常に良いです。コンポーネントがアンマウントされたときにリスナーを削除することは非常に重要ですです。

リスナーは、通常、部品が実装された後に添付されています。私は、これは通常windowまたはdocumentにイベントをアタッチするために行われることを繰り返し

componentWillUnmount: function() { 
    if (this.props.onWindowScroll) window.removeEventListener("scroll", this.handleScroll); 
} 

：

componentDidMount: function() { 
    if (this.props.onWindowScroll) window.addEventListener("scroll", this.handleScroll); 
} 

重要：ときアンマウント削除しますオブジェクト。

ユースケースによっては、親要素または子要素のHTML要素、または動的に作成された要素の一部にも添付できます。 findDOMNode()は、場合によっては役立ちます。しかし、可能な限りこれを避けることをお勧めします。