Как добавить событие клика на элемент FlatList в React Native? - PullRequest
Новая
       4

Как добавить событие клика на элемент FlatList в React Native?

0 голосов
/ 26 февраля 2020

Я работаю в демоверсии Приложение для обучения React native И мне нужно сделать кликабельный FlatList элемент.

Вот функция Render и itemClick: 

render() {
  return (
    <View style={styles.container}>
      <View>
        <FlatListData list={this.state.itemList} />
      </View>
    </View>
  );
}

itemClick(item){
  console.log('click on item', item);
}

Я уже объявил FlatListData функциональный компонент для этого: 

const FlatListData = ({list}) => {
    return (
      <FlatList
        data={list}
        keyExtractor={(item, index) => index.toString()}
        renderItem={itemList}
      />
    );
};

В FlatList компоненте, атрибут RenderItem снова имеет пользовательский компонент для одного элемента, то есть: 

const itemList = ({item, index}) => {
  return (
      <TouchableOpacity onPress={this.itemClick(item)} style={styles.catalogContainer}>
        <Image
          source={{uri: item.img}}
          style={styles.imageStyle}
        />
      </TouchableOpacity>
    );
};

Но этот код не работает. Это даст мне ошибку вроде: Undefined is not an object (eveluting _this.itemClick)

Здесь каким образом и где я должен написать функцию щелчка для элемента?

У любого есть ответ что может решить мою проблему?

ПРИМЕЧАНИЕ:

  1. Весь код записан в одном js file. Моя Render функция находится внутри моего компонента класса. и два других компонента declarative находятся вне этого компонента класса.
  2. Мне нужен этот элемент внутри этой функции щелчка. Но я не знаю, как передать параметр внутри функции.

1 Ответ

1 голос
/ 27 февраля 2020

Есть несколько вещей, которые вы можете сделать, чтобы решить вашу проблему.

  1. Вам нужно переместить вашу itemClick функцию внутрь itemList как функцию стрелки. 
const itemList = ({ item, index }) => {
  itemClick = item => {
    console.log("click on item", item);
  };

  return (
    <TouchableOpacity
      // onPress={this.itemClick(item)}
      onPress={() => this.itemClick(item)}
      style={styles.catalogContainer}
    >
      <Image source={{ uri: item.img }} style={styles.imageStyle} />
    </TouchableOpacity>
  );
};
Передайте свою itemClick функцию в качестве реквизита дочернему компоненту 
render() {
    return (
        <View style={styles.container}>
            <FlatListData list={this.state.itemList} onItemClick={this.itemClick} />
        </View>
    );
}

itemClick = (item) => {
    console.log('click on item', item);
}

Теперь вы можете вызвать onItemClick Прописку внутри itemList

const FlatListData = ({ list, onItemClick }) => {
  itemList = ({ item }) => (
    <TouchableOpacity
      onPress={() => onItemClick(item)}
      style={styles.catalogContainer}
    >
      <Image source={{ uri: item.img }} style={styles.imageStyle} />
    </TouchableOpacity>
  );

  return (
    <FlatList
      data={list}
      keyExtractor={(item, index) => index.toString()}
      renderItem={this.itemList}
    />
  );
};

Надеюсь, это поможет вы. Не стесняйтесь сомнений.

...