Как мне связать локальную функцию, когда я передаю визуализированное представление, взаимодействующее с этой функцией, в рекреационную систему вact-native? - PullRequest
Новая
       16

Как мне связать локальную функцию, когда я передаю визуализированное представление, взаимодействующее с этой функцией, в рекреационную систему вact-native?

0 голосов
/ 18 января 2019

Я передаю визуализацию элементу Accordion в native-base, используя пропелу renderContent. Визуализация содержит две кнопки, которые при нажатии запускают функции, локальные для текущего компонента. К сожалению, эти функции недоступны после того, как они были действительно отображены.

Как правильно связать функции, чтобы при нажатии на них ссылались на правильные функции?

Я использую самые современные стабильные выпуски реактивного-нативного-нативного-базового, и я запускаю это через expo для тестирования.

Вот документация на native-base:

http://docs.nativebase.io/Components.html#accordion-custom-header-content-headref

Аккордеон 

<Accordion
  dataArray={ this.state.websites }
  renderContent={ this._renderAccordionContent }
/>

renderContent: 

_renderAccordionContent(content) {
  return (
    <Button 
      onPress={() => this.openSite(content.path)}
    >
      <Text>Open</Text>
    </Button>
    <Button
      onPress={() => this.editSite(content.key)}
    >
      <Text>Edit</Text>
    </Button> 
  )
}

Когда кнопки нажимаются, ожидаемые результаты состоят в том, что функции выполняются.

Фактические результаты таковы, что при нажатии кнопок заполняются следующие ошибки: 

_this2.openSite is not a function.

_this2.editSite is not a function.

Спасибо за любую помощь.

1 Ответ

0 голосов
/ 18 января 2019

Ознакомьтесь с этой прекрасной статьей, в которой показано несколько различных способов привязки ваших функций https://medium.freecodecamp.org/react-binding-patterns-5-approaches-for-handling-this-92c651b5af56

Вот пример его привязки в конструкторе вашего компонента, который использует компонент Accordion. Это ни в коем случае не единственный способ связывания функций. Приведенная выше статья дает 5 различных способов сделать это. 

class MyComponent extends Component {

  constructor(props) {
    super(props);

    this.openSite = this.openSite.bind(this);
    this.editSite = this.editSite.bind(this);
  }

  // I am assuming you have written your functions like this and not as arrow functions
  openSite (path) {
    ...
  }

  editSite (key) {
    ...
  }

  _renderAccordionContent(content) {
    return (
      <Button 
        onPress={() => this.openSite(content.path)}
      >
        <Text>Open</Text>
      </Button>
      <Button
        onPress={() => this.editSite(content.key)}
      >
        <Text>Edit</Text>
      </Button> 
    )
}

  render() {
    ...
    <Accordion
      dataArray={ this.state.websites }
      renderContent={ this._renderAccordionContent }
    />
    ...
  }
}
...