子どもがレンダリングの外で反応する（

Question

）タイトルが明確になる可能性がありますが、これは本当に私が思いつくことができる最高のものです。

したがって、Reactでフィルタされたテーブルコンポーネントを作成しようとしています。しかし、私はフィルタをテーブル自体の定義から独立して定義したい。だからここに私がやっていることがあります。

私はフィルタコンポーネント作成：

var Table = React.createClass({ 
    filterChanged : function (column, value) { 
    //this will be wired as a updateTable prop for the Filter 
    }, 
    render : function() { 
    //I am trying not to define a filter here, 
    //I am trying to use the previously-defined Filter component. 
    //I want the Table component to remain generic and re-usable, 
    //with optional filters. 
    var thisComponent = this; 
    //I can have as many filters as I want. 
    var filterToRender = React.Children.map(this.props.children, function (child) { 
     var filterUI; 
     if (child.type.displayName === 'Filter') { 
     filterUI = React.cloneElement(child, {updateTable : thisComponent.filterChanged}); 
     } 
     return (<div>{filterUI}</div>); 
    }); 
    //along with the rest of the table UI, 
    return (<div> 
     <table>bla bla</table> 
     {filterToRender} 
    </div>); 
    } 
}); 

その後、私のメインページに、私はこのようにそれをレンダリング：

ReactDOM.render((<Table> 
    <Filter columnName='status'></Filter> 
</Table>), document.getElementById('appHolder')); 

その後

var Filter = React.createClass({ 
    handleChange : function (value) { 
    this.props.updateTable(this.props.columnName,value); 
    }, 
    render : function() { 
    //an input that will report its value to this.handleChange 
    } 
}); 

を、私は表コンポーネントを作成します

これはうまく描画されます。変更機能も有線であるようです。しかし、フィルタ値が変更されるたびにテーブルのfilterChangedメソッドがトリガされ、回数が増えます。最初に変更すると、2回トリガされます。 2回目の変更、6回; 3回目の変更、14回。

奇妙で凄い。私はここで間違って何をしていますか？

Answer 1

上記の手順はReactに関する限り正確です。私が得たバグは、jqueryプラグインを使っていくつかのコンポーネントを初期化する別のフレームワーク（Materialize）が原因でした。 DOMを変更するので、onChangeイベントが適切なノードに正しくアタッチされていることを手動で確認する必要があります。

FWIW、私はFilter成分のComponentDidMountとComponentDidUpdateのドロップダウンリストでthis.handleChangeにonChangeを取り付けました。 ComponentDidUpdateから初期化を削除し、問題を解決しました。これは、handleChangeという複数のインスタンスが、コンポーネントが更新されるたびにonChangeイベントにバインドされていたためです。