Как я могу получить значение элемента в FlatList?

Question

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

Итак, вот мое представление списка категорий:

<View style={{ flex: 1 }}>
        <ScrollView style={{ backgroundColor: '#ffffff', }}>
          <View style={{ flex: 1, flexDirection: 'column', marginTop: 65, margin: 40 }}>
            <Text style={{ fontSize: 40 }}>Job Category</Text>
            <FlatList
              style={{ marginTop: 20 }}
              data={this.state.jobCategory}
              renderItem={({ item }) => <ListItem data={item} value={item.value} />}
            />
          </View>
        </ScrollView>
        <TouchableHighlight onPress={handleSubmit(_categorySelected)} style={{ backgroundColor: 'white', padding: 20, alignItems: 'center' }} underlayColor="white">
          <Text style={{
            backgroundColor: 'black', color: 'white', fontSize: 20, fontWeight: 'bold',
            height: 50, width: 300, textAlign: 'center', padding: 14
          }}>NEXT</Text>
        </TouchableHighlight>
      </View>

и вот мое представление ListItem

constructor(props) {
        super(props);
        this.state = {
            selected: false,
            text: props.data.text,
            value: props.data.value
        };

        this.choosen = this.choosen.bind(this);
    }

    choosen(isSelected) {
        this.setState({
            selected: !isSelected,
        });
    }

    render() {
        let backgroundColor = this.state.selected ? "#000000" : "#ffffff";
        let fontColor = this.state.selected ? "#ffffff" : "#000000";
        return (
            <TouchableHighlight selected={this.state.selected} onPress={() => this.choosen(this.state.selected)} underlayColor="black">
                <View style={{backgroundColor: backgroundColor, padding: 20 }}>
                    <Text style={{color: fontColor, fontSize: 20 }}>{this.props.data.text}</Text>
                </View>
            </TouchableHighlight>
        );
    }

Теперь я предполагаю, что мне нужен тег или что-то для моего ListItem, где я получаю значение выбранного элемента.У кого-нибудь есть идея?

Answer 1

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

Наилучшим подходом было бы поднять состояние вверх.Вот как вы это сделаете:

1. Удалите выбранное состояние для компонента элемента списка, оно будет передано этому компоненту в качестве реквизита.Вы также можете удалить метод choosen ()
2. Добавить свойство selectedItem в состояние компонента списка
3. Добавить метод в компонент списка для обновления состояния selectedItem
4. В методе renderItem объекта FlatList вы проверяете, равен ли текущий элемент выбранному элементу, и передаете выбранный объект в элемент списка, который является результатом этой проверки
5. Вы передаете функцию в качестве объекта-компонента компоненту списка.который вы прикрепляете к обработчику onPress TouchableHighlight.Эта функция должна быть связана с выбранным вами методом средства обновления selectedItem компонента списка