Использование ссылки в FlatList в React Native - PullRequest
Новая
       87

Использование ссылки в FlatList в React Native

0 голосов
/ 25 сентября 2019

У меня все еще проблемы с пониманием ссылок в React Native (и React в целом).Я использую функциональный компонент.У меня есть FlatList, который имеет много предметов.Как создать ссылку на вещь внутри элемента, например компонент Text или View? 

<FlatList
 data={data}
 renderItem={({ item }} => {
   <View>

    ... lots of other stuff here

    <TouchableOpacity onPress={() => _editITem(item.id)}>
      <Text ref={(a) => 'text' + item.id = a}>EDIT</Text>
    </TouchableOpacity>

  </View>
 }
/>

Затем в _editItem я хочу сослаться на компонент Text, чтобы я мог изменить его текст с 'EDIT«РЕДАКТИРОВАНИЕ», или даже изменить его стиль, или что-то еще. 

_editPost = id => {
  console.log(text + id)
}

Я пытался ... 

FeedComponent = () => {
  let editPosts = {}

 <FlatList
 data={data}
 renderItem={({ item }} => {
   <View>

    ... lots of other stuff here

    <TouchableOpacity onPress={() => _editITem(item.id)}>
      <Text ref={(a) => editPosts[item.id] = a}>EDIT</Text>
    </TouchableOpacity>

  </View>
 }
/>

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

1 Ответ

1 голос
/ 25 сентября 2019

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

В описываемом вами случае вы, вероятно, захотите установить какое-то состояние в родительском компоненте, которое затем повлияет на визуализацию элемента.

В качестве идентификатора sidenote используются ссылки, если вам нужно вызвать метод на дочернем компоненте, например, вызвать focus на TextInput, например, но не для обязательного обновления содержимого компонента.

В вашем случаеВы хотите обновить состояние, представляющее текущий активный элемент.Что-то вроде: 

import React, {useState} from 'react';
FeedComponent = () => {
  const [activeItem, setActiveItem] = useState(null);

 <FlatList
 data={data}
 renderItem={({ item }} => {
   return (
   <View>

    ... lots of other stuff here

    <TouchableOpacity onPress={() => setActiveItem(item.id)}>
      {activeItem === item.id
          ? <Text>EDITING</Text>
          : <Text>EDIT</Text>
      }
    </TouchableOpacity>

  </View>
 );
 }
 extraData={activeItem}
/>
...