Вызов родительской функции из дочернего компонента в строке React-Native ListView

я видел несколько примеров этого вопроса, но не смог заставить их работать или полностью понять, как все это сочетается. У меня есть компонент ParentListView и еще называют ChildCell (строка в listView) я хочу onPress С 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. Что я упускаю?

спасибо заранее!

обновление 1:

на ParentListView если я изменю реквизит, переданный этому:

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

получить Unhandled JS Exception: null is not an object (evaluating 'this.onDonePressList') ошибка во время компиляции при отрисовке ячейки.

если я поставлю консоль.войдите непосредственно в систему следующим образом:

<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:

OK, Я попытался привязать метод в конструкторе следующим образом:

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

7
components function listview react-native row

1 ответов

позвонить onDonePress на pressHandler такой:

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

кроме того, bind 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

6