Question

我正在尝试列出我获取值的项目列表，然后将其存储在redux中以便稍后在DB中发送它。但一切都运作良好，我只是陷入了获取所选项目的价值。

所以这是我的类别列表视图：

<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

如果我理解正确，您希望类别列表视图存储上次选择的列表项的值？

最好的方法是lift the state向上。这就是你要做的事情：

从列表项组件中删除所选状态，它将作为prop传递给该组件。您也可以删除choosen（）方法
将selectedItem属性添加到列表组件的状态
向列表组件添加方法以更新selectedItem状态
在FlatList的renderItem prop中，检查当前项是否等于selectedItem，并将选中的prop传递给列表项，这是该检查的结果
您将一个函数作为prop传递给您附加到TouchableHighlight的onPress处理程序的列表项组件。此函数需要链接到列表组件的selectedItem updater方法

如何获取FlatList中项目的值？

1 个答案: