React-Native TouchableHighlit OnPress 功能

Question

我有可折叠的列表视图，每个项目都是一个 touchablehighlight ，每当用户点击它们时，我需要将用户重定向到另一个页面，并带有一些 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>
    );

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

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

还添加绑定到 onpress 没有帮助：

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

Answer 1

尝试这样做：

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

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

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