React-Native ListView行の子コンポーネントから親関数を呼び出す

Question

この質問の例をいくつか見てきましたが、いずれもうまく動作しないか、またはすべての方法が完全に理解できるかを完全に理解できませんでした。私はParentListViewと呼ばれるコンポーネントを持っていて、もう1つはChildCell（リストビュー内の行）です。のChildCellからParentListViewの関数を呼びたいと思っています。

class ChildCell extends Component { 

    pressHandler() { 
    this.props.onDonePress; 
    } 

    render() { 
    return (
     <TouchableHighlight onPress={() => this.pressHandler()} > 
      <Text>Child Cell Button</Text> 
     </TouchableHighlight> 
    ); 
    } 

} 

とParentListViewで：

class ParentListView extends Component { 

//... 

    render() { 

    return (
     <ListView 
     dataSource={this.state.dataSource} 
     style={styles.listView} 
     renderRow={this.renderCell} 
     renderSectionHeader={this.renderSectionHeader} 
     /> 
    ); 
    } 

    renderCell() { 
    return (
     <ChildCell onDonePress={() => this.onDonePressList()} /> 
    ) 
    } 

    onDonePressList() { 
    console.log('Done pressed in list view') 
    } 

} 

私はそれがすべての適切なコードだと思います。私はChildCellを願って登録するように報道陣を得ることができますが、その方法はParentListViewに出ることができません。私は何が欠けていますか？

ありがとうございます！

UPDATE 1：ParentListViewで

私はこれに渡された小道具を変更する場合：セルをレンダリングするとき

<ChildCell onDonePress={this.onDonePressList.bind(this)} /> 

私はコンパイル時にUnhandled JS Exception: null is not an object (evaluating 'this.onDonePressList')エラーが発生します。

私はこのように直接にconsole.logを置く場合：それはメッセージの罰金をログに記録します

<ChildCell onDonePress={() => console.log('Done pressed in list view')} /> 

。私はもともと持っていたように私はそれを残す場合は

：

それは Unhandled JS Exception: null is not an object (evaluating '_this2.onDonePressList')

UPDATEとにButtonPressにクラッシュ

<ChildCell onDonePress={() => this.onDonePressList()} /> 

2：

OK、私は、コンストラクタのような方法を結合しようとしていますso：

class ParentListView extends Component { 
    constructor(props) { 
    super(props); 
    this.onDonePressList = this.onDonePressList.bind(this); 
    this.state = {...}; 
} 

しかし、 ror：null is not an object (evaluating 'this.onDonePressList')と実行されません。

UPDATE 3： Here is a link to a react native playground

Answer 1

このようpressHandlerでonDonePressを呼び出してみてください。

pressHandler() { 
    this.props.onDonePress() 
} 

また、あなたのrenderRowとrenderSectionHeaderにthisをバインド：

<ListView 
    dataSource={this.state.dataSource} 
    style={styles.listView} 
    renderRow={this.renderCell.bind(this)} 
    renderSectionHeader={this.renderSectionHeader.bind(this)} 
    /> 

私が設定しましたabovを使用した例here e関数。

https://rnplay.org/apps/DcdAuw