0

我用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}}}
4

1 回答 1

0

React Native 没有e.target.valueReact 之类的。

如果您的目标是点击项目，您可以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()}
        />
于 2021-03-25T08:52:24.590 回答