从React Native ListView行中的子组件调用父函数

Question

我看到了这个问题的一些例子，但无法让任何例子发挥作用，也无法完全理解这一切是如何结合在一起的。我有一个组件叫ParentListView，另一个组件叫做ChildCell（listView中的一行）。我希望ChildCell中的onPress调用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中激发的方法。我错过了什么？

提前感谢！

更新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')} />

它会很好地记录消息。

如果我像最初一样离开它：

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

使用Unhandled JS Exception: null is not an object (evaluating '_this2.onDonePressList') 按下按钮时崩溃

更新2:

好的，我已经尝试在构造函数中绑定方法，如下所示：

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

但它给了我一个错误：null is not an object (evaluating 'this.onDonePressList')并且不会运行。

更新3:这里有一个到react原生游乐场的链接

Answer 1

尝试在pressHandler中调用onDonePress，如下所示：

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

此外，将this绑定到您的renderRow和renderSectionHeader:

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

我在这里用上面的函数设置了一个例子。

https://rnplay.org/apps/DcdAuw