Как вызвать функцию внутри класса рендеринга в React-native

Question

Я хочу вызвать функцию внутри импортированного класса рендера. Я попробовал следующее, но безуспешно.

class1.js

import class2 from "./class2";
export default class1 MainCategoriesScreen extends React.PureComponent  {
    renderItem({ item }) {
       return <Class2 product={item}/>
    }

    changeCategoryId(id){
        console.log(id);
    }

    render() {
     return (
      <FlatList
      data={this.state.products}
      renderItem={this.renderItem}
      ...

}

и для класса2

  render() {
   return (
      <Card style={{flex:1}}>
          <CardItem cardBody button
            onPress={this.changeCategoryId(product.id)}>
            ...
          </CardItem>
            ...
}
export default withNavigation(class2 );

Также я попробовал это:

this.changeCategoryId(product.id)
this.changeCategoryId(product.id)
this.changeCategoryId.bind(product.id)
this.props.changeCategoryId(product.id)

Answer 1

Вы можете передать метод changeCategoryId из класса 1 в класс 2 как пропеллер, а затем вызвать его как this.props.changeCategoryId():

// class 1
constructor(props) {
    super(props);

    ...

    this.renderItem = this.renderItem.bind(this);
    this.changeCategoryId = this.changeCategoryId.bind(this);
}

renderItem({ item }) {
   return <Class2 product={item}
                  changeCategoryId={this.changeCategoryId}/>
}

// class 2
  render() {
    return (
      <Card style={{flex:1}}>
        <CardItem cardBody button
          onPress={this.props.changeCategoryId(product.id)}>
          ...
        </CardItem>
      ...

Обратите внимание, что вам нужно связать changeCategoryId и renderItem в классе 1.

Answer 2

renderItem({ item }) {
  return <Class2 product={item}/>
}

Вы пропускаете передачу реквизита в Class2 , который будет обрабатывать changeCategoryId.

renderItem({ item }) {
  return <Class2 changeCategoryId={this.changeCategoryId} product={item}/>
}

Это означает, что Class2 теперь будет иметь доступ к реквизиту,вызывается changeCategoryId, которая будет changeCategoryId функцией Class1.

Затем в функции рендеринга вашего Class2 вы можете сделать:

<CardItem cardBody button
  onPress={() => this.props.changeCategoryId(product.id)}>
  ...

Answer 3

Вы также можете попробовать это:

renderItem = ({ item }) => {
   return <Class2 product={item} onPress={id => this.myfunction(id)} />
}

myfunction(id) {
  console.log(id);
}

Answer 4

У меня недавно была та же проблема, просто сделайте это:

export default class1 MainCategoriesScreen extends React.PureComponent  {
  renderItem = ({ item }) => {
    return <Class2 product={item} onPress={this.myfunction} />
  }

  myfunction = (id) => {
      console.log(id);
  }

  render() {
    return (
     <FlatList
       data={this.state.products}
       renderItem={this.renderItem}
       ...

и

render() {
  return (
    <Card style={{flex:1}}>
      <CardItem cardBody button
        onPress={() => this.props.onPress(product.id)}>
        ...
      </CardItem>
        ...