Question

我要在长按该项目时突出显示该列表中的一个项目，并显示删除选项以从列表中删除该项目。

    renderFlatlist = () => {
    return (
      <View style={styles.flatListContainer}>
        <FlatList
          style={styles.flatListStyle}
          showsVerticalScrollIndicator={false}
          data={this.state.fetchProjectDetail}
          keyExtractor={(item, index) => index.toString()}
          renderItem={this._renderItem}
        />
      </View>
    );
  };

  _renderItem = ({ item }) => {
    console.log("_renderItem", item.id);
    return (
      <TouchableOpacity
        style={{ marginTop: 10 }}
        onLongPress={this._handleLongPress(item)}
        onPress={() => {
          this.props.navigation.navigate("CreateProject", {
            database: this.props.navigation.state.params.database,
            id: item.id,
            from: "edit"
          });
        }}
      >
        <Text>Project Name: {item.project_name}</Text>
      </TouchableOpacity>
    );
  };

  _handleLongPress = item => {
    Alert.alert("LongPress");
  };

我已经做了很多，但是当我渲染列表时，警报会不断弹出，而无需长按列表中的该项目。以及如何长按该项目并显示删除选项以从列表中删除该项目。

Answer 1

您正在立即调用处理程序，但是它必须是回调函数，即() => this._handleLongPress(item)。从那里可以设置突出显示该行所需的任何状态。

我建议使用辅助数据结构来跟踪长按了哪些项目。这是一个示例，其中我使用地图存储所选项目的项目ID并应用突出显示样式。如果您不需要多个选择，则可以自己保存选择的ID。

这里的窍门是使用react的FlatList extraData属性作为一个tigger来重新渲染该列表，因为数据属性未更改（出于充分的原因，您不应该在组件内部更改数据源）。 / p>

codesandbox

长按该项目时，如何从清单中突出显示一个项目并显示删除选项以将该项目从列表中删除？

1 个答案: