React Native - 如何获得阵列映射组件的密钥

我创建了这个简单的'Base'组件，它可以动态创建多个'Box'组件（通过renderBoxes（）方法）。当按下其中一个框组件时，我想知道所有动态创建的Box组件中的哪一个被按下。有没有办法呢？我们要使用'钥匙'吗？React Native - 如何获得阵列映射组件的密钥

import data from './dataFile.json'; 

class Base extends Component { 

    state = {calendarData: []}; 

    componentWillMount() { 
    //storing json data in the state 
    this.setState({ calendarData: data }); 
    } 

    onBoxPress() { 

    // HOW TO ACCESS WHICH BOX COMPONENT WAS PRESSED? 

    } 

    renderBoxes() { 
    return this.state.calenderData.map(ride => { 
     <Box 
     key={ride.id} 
     onPress={this.onBoxPress}> 
     </Box> 
    }); 
    } 

    render() { 
    return(
     <View> 
     { this.renderBoxes() } 
     </View> 
    ); 
    } 
}

请提供一个简短的理由。谢谢。

来源

2017-09-03 prasang7

key prop由React在内部用于优化虚拟渲染。尽管可能会使用将信息传回给父母，但它可能不应该。（事实上，在开发模式我认为，如果你尝试访问的关键道具，你会得到一个警告。）

相反，你可以包装onPress回调封闭在ride变量的匿名函数：

<Box 
    key={ride.id} 
    onPress={() => this.onBoxPress(ride)}> 
    </Box>

然后，您可以收到在onBoxPress回调搭：

onBoxPress(ride) { 
    // do something with the ride 
}

编辑：

使用匿名函数包装器具有额外的好处，它正确地绑定回调函数的this上下文。如果你不使用的包装功能，你必须手动到bind它：

<Box onPress={this.onBoxPress.bind(this)}></Box>

此外，要自动绑定this背景下，您可以改用类属性语法：

onBoxPress =() => { 
    // `this` is now bound correctly 
    this.setState(...) 
}

来源

2017-09-03 16:54:14 jevakallio

有效。我明白了你的观点。谢谢。 – prasang7

太棒了！不要忘记将问题标记为已回答，所以其他寻求未解答的问题需要帮助的人可以看到这个问题已经解决。 – jevakallio

啊，'this.setState'问题是由于'this'变量未被正确绑定。编辑答案包括本说明。 – jevakallio

React Native - 如何获得阵列映射组件的密钥

回答

相关问题