Question

我正在使用Native Native与NativeBase组件，我在调用我的_doStuff函数时遇到问题。我试着打电话给

onPress={this._doStuff.bind(this)}

但继续接收

无法正确读取未定义的“doStuff”

_doStuff(){
 console.log('Hi');
   }

 _getList() {
 return this.state.listData.map(function(data, i){
return(

  <View key={i}>
  <ListItem style={styles.listItemContain}>
  <Button transparent onPress={this._doStuff.bind(this)}>

    <View>
    <Thumbnail source={{uri: data.icon}}  style={styles.thumbnailStyle}/>
    <Text style={styles.title}>{data.name}</Text>
    <Text note style={styles.text}>{data.vicinity}</Text>
    </View>
      </Button>

  </ListItem>
  </View>

);
 });

Answer 1

this上下文在.map循环中丢失。如果您使用的是ES6，请尝试使用胖箭头功能，如下所示。

_getList() {
 return this.state.listData.map((data, i) => {
return(

  <View key={i}>
  <ListItem style={styles.listItemContain}>
  <Button transparent onPress={this._doStuff.bind(this)}>

    <View>
    <Thumbnail source={{uri: data.icon}}  style={styles.thumbnailStyle}/>
    <Text style={styles.title}>{data.name}</Text>
    <Text note style={styles.text}>{data.vicinity}</Text>
    </View>
      </Button>

  </ListItem>
  </View>

);
 });

如果由于各种原因你不能在项目中使用ES6，请使用替代方法（旧学校），如下所示......

_getList() {
 return this.state.listData.map(function(data, i){
var that = this;
return(

  <View key={i}>
  <ListItem style={styles.listItemContain}>
  <Button transparent onPress={that._doStuff.bind(that)}>

    <View>
    <Thumbnail source={{uri: data.icon}}  style={styles.thumbnailStyle}/>
    <Text style={styles.title}>{data.name}</Text>
    <Text note style={styles.text}>{data.vicinity}</Text>
    </View>
      </Button>

  </ListItem>
  </View>

);
 });

Answer 2

我会打赌你的_getList函数的上下文没有你正在考虑的React Component的上下文。如果您正在使用ES6类并希望自动绑定组件上下文，我建议使用autobind-decorator。如果你决定走这条路是a nice tutorial on setting it up。

否则，请确保在致电_getList时确保使用.call或.bind来呼叫。

例如：

// if you are calling the function directly this._getList().call(this)

或

// if you are passing the function off for another function to execute it this._getList.bind(this)

如何处理onPress函数的反应

2 个答案: