javascript - react native如何访问事件目标?
问题描述
我用json文件中的国家/地区拨号代码制作了FlatList 。现在我想访问事件目标的值,但是当我尝试点击它时,它并没有像我想象的那样工作。有人可以帮忙吗?这是FlatList组件的样子:
<FlatList
data={updatedList}
renderItem={
({item}) =>
<TouchableOpacity
onPress={(e) => {
// navigation.navigate('PhoneNr')
console.log(e.target)
}}
>
<Text style={styles.text}>
<Text >{item.name}</Text>
<Text style={styles.numbers}> {item.dialCode}</Text>
</Text>
</TouchableOpacity>
}
keyExtractor={(item, index) => index.toString()}
/>
当我控制台日志时e.target
,我得到类似的东西
{"_children": [5445], "_internalFiberInstanceHandleDEV": {"_debugHookTypes": null, "_debugID": 86271, "_debugIsCurrentlyTiming": false, "_debugNeedsRemount": false, "_debugOwner": {"_debugHookTypes": null, "_debugID": 86269, "_debugIsCurrentlyTiming": false, "_debugNeedsRemount": false, "_debugOwner": [FiberNode], "_debugSource": [Object], "actualDuration": 3, "actualStartTime": 721475, "alternate": null, "child": [Circular], "childExpirationTime": 0, "dependencies": [Object], "effectTag": 1, "elementType": [Object], "expirationTime": 0, "firstEffect": null, "index": 0, "key": null, "lastEffect": null, "memoizedProps": [Object], "memoizedState": null, "mode": 8, "nextEffect": null, "pendingProps": [Object], "ref": null, "return": [FiberNode], "selfBaseDuration": 0, "sibling": null, "stateNode": null, "tag": 9, "treeBaseDuration": 1, "type": [Object], "updateQueue": null}, "_debugSource": {"columnNumber": 13, "fileName": "C:\\Users\\Aly\\Documents\\GitHub\\herovet\\node_modules\\react-native\\Libraries\\Text\\Text.js", "lineNumber": 156}, "actualDuration": 3, "actualStartTime": 721475, "alternate": null, "child": {"_debugHookTypes": null, "_debugID": 86273, "_debugIsCurrentlyTiming": false, "_debugNeedsRemount": false, "_debugOwner": null, "_debugSource": null, "actualDuration": 1, "actualStartTime": 721476, "alternate": null, "child": null, "childExpirationTime": 0, "dependencies": null, "effectTag": 0, "elementType": null, "expirationTime": 0, "firstEffect": null, "index": 0, "key": null, "lastEffect": null, "memoizedProps": "Afghanistan", "memoizedState": null, "mode": 8, "nextEffect": null, "pendingProps": "Afghanistan", "ref": null, "return": [Circular], "selfBaseDuration": 0, "sibling": null, "stateNode": 5445, "tag": 6, "treeBaseDuration": 0, "type": null, "updateQueue": null}, "childExpirationTime": 0, "dependencies":
null, "effectTag": 0, "elementType": "RCTVirtualText", "expirationTime": 0, "firstEffect": null, "index": 0, "key": null, "lastEffect": null, "memoizedProps": {"accessible": true, "allowFontScaling": true, "children": "Afghanistan", "ellipsizeMode": "tail", "forwardedRef": null}, "memoizedState": null, "mode": 8, "nextEffect": null, "pendingProps": {"accessible": true, "allowFontScaling": true, "children": "Afghanistan", "ellipsizeMode": "tail", "forwardedRef": null}, "ref": null, "return": {"_debugHookTypes": null, "_debugID": 86269, "_debugIsCurrentlyTiming": false, "_debugNeedsRemount": false, "_debugOwner": [FiberNode], "_debugSource": [Object], "actualDuration": 3, "actualStartTime": 721475, "alternate": null, "child": [Circular], "childExpirationTime": 0, "dependencies": [Object], "effectTag": 1, "elementType": [Object], "expirationTime": 0, "firstEffect": null, "index": 0, "key": null, "lastEffect": null, "memoizedProps": [Object], "memoizedState": null, "mode": 8, "nextEffect": null, "pendingProps": [Object], "ref": null, "return": [FiberNode], "selfBaseDuration": 0, "sibling": null, "stateNode": null, "tag": 9, "treeBaseDuration": 1, "type": [Object], "updateQueue": null}, "selfBaseDuration": 1, "sibling": null, "stateNode": [Circular], "tag": 5, "treeBaseDuration": 1, "type": "RCTVirtualText", "updateQueue": null}, "_nativeTag": 5447, "viewConfig": {"uiViewClassName": "RCTVirtualText", "validAttributes": {"accessibilityActions": true, "accessibilityHint": true, "accessibilityLabel": true, "accessibilityLiveRegion": true, "accessibilityRole": true, "accessibilityState":
true, "accessibilityValue": true, "accessible": true, "collapsable": true, "importantForAccessibility": true, "isHighlighted": true, "maxFontSizeMultiplier": true, "nativeID": true, "needsOffscreenAlphaCompositing": true, "onAccessibilityAction": true, "onAccessibilityEscape": true, "onAccessibilityTap": true, "onLayout": true, "onMagicTap": true, "pointerEvents": true, "renderToHardwareTextureAndroid": true, "shouldRasterizeIOS": true, "style": [Object], "testID": true}}}
解决方案
React Native 没有e.target.value
React 之类的。
如果您的目标是点击项目,您可以item
直接使用 inTouchableOpacity
的onPress
函数,例如:
<FlatList
data={updatedList}
renderItem={
({item}) =>
<TouchableOpacity
onPress={(e) => {
// navigation.navigate('PhoneNr')
console.log(item) //<-- use item here
}}
>
<Text style={styles.text}>
<Text >{item.name}</Text>
<Text style={styles.numbers}> {item.dialCode}</Text>
</Text>
</TouchableOpacity>
}
keyExtractor={(item, index) => index.toString()}
/>
推荐阅读
- r - 如何通过计算相关系数来降低基因表达矩阵的维数?
- xamarin - ReactiveUI ReactiveCommand 和 Xamarin 4.0 Shell 导航
- javascript - 需要在javascript中删除逗号
- javascript - 无法将 JSON 响应设置为 var,无论是否使用 JSON.parse()
- reactjs - Redux Watch 没有响应 redux store 的变化
- c++ - VS2015 上的 TightVNC 从源代码编译
- node.js - 从子目录运行父 npm 脚本时如何找到原始目录?
- clang - 如何知道一个基本块 PostDominate 另一个?
- react-native - 如何让 React Native 中的 ScrollView 扩展到 IOS 中的状态栏区域?
- apache-kafka - 启动 Kafka 消费者时出现复制因子错误