如何将组件引用传递给 onPress 回调? [英] How to pass a component reference to onPress callback?

问题描述

我确实使用 onPress处理程序"渲染了以下类型的列表.

I did render following kind of list with onPress "handler".

我意识到 onPress 处理程序是无用的，因为我无法获得种族被按下的参考.我得到 ref 未定义错误.

I have realised that onPress handler is useless because I cannot get the reference of race pressed. I get ref is not defined error.

var races = Engine.possibleRaces;

function racePressed(ref) {
    console.log("REF: " + ref); // is never called
}

var races = Engine.possibleRaces;
var rowViews = [];
for (var i = 0; i < races.length; i++) {
  rowViews.push(
    <Text
      ref={i}
      onPress={() => racePressed(ref)} // ref is not defined
      style={styles.raceText}>{races[i].text}
    </Text>

  );
}

<View style={{width: Screen.width, flexDirection:'row', flexWrap: 'wrap', alignItems: "center"}}>
       {rowViews}
</View>  

我也尝试将 i 作为参数传递.它不起作用，因为它在迭代结束后具有价值.基本上它有 Races.length 值.

I did also try to pass i as a parameter. It did not work, because it has the value after iteration ends. Basically it has races.length value.

  onPress={() => racePressed(i)} // Same as races.length

我确实将问题隔离到以下程序.

I did isolate problem to following program.

'use strict';
import React, {
  AppRegistry,
  Component,
  StyleSheet,
  Text,
  View
} from 'react-native';

let texts = [{text: "Click wrapper text1"}, {text: "Click wrapper text2"}];

class sandbox extends Component {

  rowPressed(ref, i) {
    console.log("rowPressed: " + ref + " " + i)
  }

  render() {

    var rows = [];

    for (var i = 0; i < texts.length; i++) {
      rows.push(
        <Text
          ref={i}
          onPress={() => this.rowPressed.bind(this, i)}
          style={styles.raceText}>{texts[i].text}
        </Text>
      );
    }

    return (
      <View style={styles.container}>

        <View>
          {rows}
        </View>

      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center'
  }
});

AppRegistry.registerComponent('sandbox', () => sandbox);

不调用回调，除以下警告外不抛出任何错误

Callback is not called and no errors thrown except following warning

[tid:com.facebook.React.JavaScript] Warning: Each child in an array or iterator should have a unique "key" prop. Check the render method of `sandbox`. See https://fb.me/react-warning-keys for more information.

推荐答案

我建议你在构造函数中绑定那个函数，比如..

I suggest you bind that function in constructor like..

constructor(props){
    super(props);
    //your codes ....

    this.rowPressed = this.rowPressed.bind(this);
}

这会按照您的预期绑定 rowPressed 函数的 this 上下文，从而使您的代码正常工作.

This binds this context of rowPressed function as you expect it to be, making your code works properly.

此外，要消除警告消息，您应该为每个 元素提供唯一的 key 属性，使用 在你的代码中应该可以工作.

Also, to get rid of warning messages you should provide unique key properties for each <Text> element, using <Text key={i} ....> in your code should work.

这篇关于如何将组件引用传递给 onPress 回调?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！