Question

我有可折叠的listview，每个项目都是可触摸的高亮，每当用户点击它们时，我需要将用户重定向到另一个页面，带有一些id（参数，touchablehighlight的id）

用于调试和测试目的，在将用户重定向到页面之前（我还不知道该怎么做），首先我尝试在控制台中打印id。但问题是你点击它的任何按钮，它将打印最后一项的ID。（数组中的最后一项）。

任何解决方案？我的错是什么？

var Accordion = require('react-native-accordion');

class Courses extends Component {

  constructor(props) {
        super(props);
        this.state = {
          dataSource: new ListView.DataSource({
            rowHasChanged: (row1, row2) => row1 !== row2,
          }),
          loaded: false,
        };
    }

  fetchData() {
// fetching data
  }

  componentDidMount() {
    this.fetchData();
  }

  render(){
    if (!this.state.loaded) {
      return this.renderLoadingView();
    }

    return (
      <View style={{
        flex: 1
      }}>
      <ListView
        dataSource={this.state.dataSource}
        renderRow={this.renderRow}
        style={styles.listView}
      />
      </View>
    );
  }

  renderRow(data) {

    var header = (
      <View>
          <View style={styles.rowContainer}>
            <View  style={styles.textContainer}>
              <Text style={styles.title}>{data.nid}</Text>
              <Text style={styles.description} numberOfLines={0}>{data.title}</Text>
            </View>
          </View>
          <View style={styles.separator}></View>
    </View>
    );
///////////
    var content = [];
    for(var x=0; x < Object.keys(data.course).length; x++){
      var title = data.course[x].title;
      var course_id = data.course[x].course_id;
      content.push(
        <TouchableHighlight
        underlayColor='#e3e0d7'
        key={x}
        onPress={() => {
          console.log(title);   ///<<<<<< here is the problem >>>>>>
        }}
        style={styles.child}
        >
        <Text style={styles.child}>
        {data.course[x].title}
        </Text>
        </TouchableHighlight>
      );
    }
    var clist = (
      <View style={styles.rowContainer}>
      {content}
      </View>
    );
////////////
    return (
      <Accordion
        header={header}
        content={clist}
        easing="easeOutCubic"
      />
    );
  }

  renderLoadingView() {
    return (
      <View style={styles.loading}>
        <Text style={styles.loading}>
          Loading Courses, please wait...
        </Text>
      </View>
    );
  }
}

module.exports = Courses;

我尝试在Render（）函数之前定义一个函数，如下所示：

rowPressed(){
    console.log('row pressed');
  }

  render(){
    if (!this.state.loaded) {
      return this.renderLoadingView();
    }

我这样称呼它：

var content = [];
    for(var x=0; x < Object.keys(data.course).length; x++){
      var title = data.course[x].title;
      var course_id = data.course[x].course_id;
      content.push(
        <TouchableHighlight
        underlayColor='#e3e0d7'
        key={x}
        onPress={ () => this.rowPressed() }
        style={styles.child}
        >
        <Text style={styles.child}>
        {data.course[x].title}
        </Text>
        </TouchableHighlight>
      );
    }
    var clist = (
      <View style={styles.rowContainer}>
      {content}
      </View>
    );

但它给出的错误是：无法读取属性'rowPressed'为null

我尝试将其添加到构造函数中，但它甚至没有帮助： this.rowPressed = this.rowPressed.bind（this）

还将on bind添加到onpress没有帮助：

onPress={ () => this.rowPressed().bind(this) }

Answer 1

尝试这样做：

for(let x=0; x < Object.keys(data.course).length; x++){}

在renderRow中执行此操作，这是您在上面编写的两种方法中的第一种。

这样x应该是正确的范围。

React-Native TouchableHighlit OnPress函数

1 个答案: