使用动态生成的单元格将 TouchableHighlight 或 Touchableopacity 添加到表格行答案

【问题标题】：Adding TouchableHighlight or Touchableopacity to table row with dynamically generated cells使用动态生成的单元格将 TouchableHighlight 或 Touchableopacity 添加到表格行
【发布时间】：2020-02-13 14:59:25
【问题描述】：

我正在尝试将 TouchableHighlight 添加到我的表中，以便我可以选择一行，然后在其他地方编辑行数据。我有一个删除行的按钮，并在表格组件自述文件React Native Table 中调整了示例 4 - 但是，这会将我的所有行数据移动到第一列。

import React, { Component } from 'react';
import { StyleSheet, View, Text, TouchableOpacity, Alert } from 'react-native';
import { Table, TableWrapper, Row, Cell } from 'react-native-table-component';

export default class ExampleFour extends Component {
  constructor(props) {
    super(props);
    this.state = {
      tableHead: ['Head', 'Head2', 'Head3', 'Head4'],
      tableData: [
        ['1', '2', '3', '4'],
        ['a', 'b', 'c', 'd'],
        ['1', '2', '3', '4'],
        ['a', 'b', 'c', 'd']
      ]
    }
  }

  _alertIndex(index) {
    Alert.alert(`This is row ${index + 1}`);
  }

selectCartItem(item) {
    console.log('Select Cart Item');
     console.log(item);
}

  render() {
    const state = this.state;
    const element = (data, index) => (
      <TouchableOpacity onPress={() => this._alertIndex(index)}>
        <View style={styles.btn}>
          <Text style={styles.btnText}>button</Text>
        </View>
      </TouchableOpacity>
    );

    return (
      <View style={styles.container}>
        <Table borderStyle={{borderColor: 'transparent'}}>
          <Row data={state.tableHead} style={styles.head} textStyle={styles.text}/>
          {
            state.tableData.map((rowData, index) => (
              <TableWrapper key={index} style={styles.row}>
 <TouchableOpacity onPress={this.selectCartItem.bind(this, this.index)}>
                {
                  rowData.map((cellData, cellIndex) => (
                    <Cell key={cellIndex} data={cellIndex === 3 ? element(cellData, index) :       cellData} textStyle={styles.text}/>
                  ))
                }
</TouchableOpacity>
              </TableWrapper>
            ))
          }
        </Table>
      </View>
    )
  }
}

const styles = StyleSheet.create({
  container: { flex: 1, padding: 16, paddingTop: 30, backgroundColor: '#fff' },
  head: { height: 40, backgroundColor: '#808B97' },
  text: { margin: 6 },
  row: { flexDirection: 'row', backgroundColor: '#FFF1C1' },
  btn: { width: 58, height: 18, backgroundColor: '#78B7BB',  borderRadius: 2 },
  btnText: { textAlign: 'center', color: '#fff' }
});

【问题讨论】：

标签： react-native

【解决方案1】：

对于任何有类似问题的人，我将 TouchableOpacity 移动到行数据映射中并添加了键值。还添加了不同的样式以显示选择了哪一行。

rowData.map((cellData, cellIndex) => (
     <TouchableOpacity key={cellIndex} style={this.rowStyle(index)} onPress={() => this.selectCartItem(cellData, index)}>
         <Cell key={cellIndex} data={cellIndex === 4 ? this.voidElement(cellData, index) : cellData} textStyle={styles.text} />
     </TouchableOpacity>
 ))


selectCartItem(item, index) {        
    this.setState({selectedTableItem : index })       
}

rowStyle(selected) {

    if (selected == this.state.selectedTableItem) {
        return {
            flex: 1,
            backgroundColor: '#ff0000',
        }
    } else {
        return {
            flex: 1,
        }
    }

}

【讨论】：