如何在React-native中的Render类中调用函数

Question

I want to call a function inside an imported render class. I tried the following but no success.

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}
      ...

}

and for class2

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

Also I tried these:

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

Answer 1

You can pass the changeCategoryId method from class 1 to class 2 as a prop, and then call it like 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>
      ...

Note that you need to bind both changeCategoryId and renderItem in class 1.

Answer 2

I recently had the same issue, just do this:

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}
       ...

and

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

Answer 3

You can also try this:

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

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

Answer 4

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

You appear to be missing passing the prop into Class2 , which will handle the changeCategoryId.

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

This means, Class2 will now have access to a prop, called changeCategoryId which will be Class1's changeCategoryId function.

Then in the render function within your Class2, you can do:

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