React Native中e.target.style为何为undefined？如何修改单个Pressable样式？

一、为什么e.target.style输出undefined？ #

• React Native的事件系统和Web端完全不同，onPress触发的事件不是DOM事件，不存在target.style这个属性。
• React Native的组件样式是通过声明式方式由React管理的，不能像Web那样直接操作底层元素的样式属性，所以你无法通过e.target.style访问或修改样式。

二、修改单个点击的Pressable组件样式的方案 #

核心是用状态记录被点击元素的位置，渲染时根据状态动态切换样式，具体实现如下：

修改后的完整代码 #

import { Text, StyleSheet, View, Pressable } from 'react-native';
import { useState } from 'react';
import gridd from '../wordpuzzle.json'; // 导入4x4矩阵

const WordsGrid = (props) => {
    // 存储选中元素的位置，格式为[行索引, 列索引]，初始为null表示无选中
    const [selectedPosition, setSelectedPosition] = useState(null);

    const handlePressed = (rowIndex, colIndex) => {
        // 点击时切换选中状态：如果当前元素已选中则取消，否则设置为当前位置
        setSelectedPosition(prev => 
            prev?.[0] === rowIndex && prev?.[1] === colIndex ? null : [rowIndex, colIndex]
        );
    };

    return (
        <View style={styles.container}>
            {gridd.square.map((row, rowIndex) => (
                <View key={rowIndex} style={styles.row}>
                    {row.map((letter, colIndex) => {
                        // 判断当前元素是否被选中
                        const isSelected = selectedPosition?.[0] === rowIndex && selectedPosition?.[1] === colIndex;
                        return (
                            <Pressable
                                key={`${rowIndex}-${colIndex}`}
                                // 动态应用样式：选中时黑色背景，默认红色
                                style={isSelected ? styles.selectedPressable : styles.defaultPressable}
                                onPress={() => handlePressed(rowIndex, colIndex)}
                            >
                                <Text style={styles.letterText}>{letter}</Text>
                            </Pressable>
                        );
                    })}
                </View>
            ))}
        </View>
    );
};

// 统一管理样式，React Native最佳实践
const styles = StyleSheet.create({
    container: {
        padding: 10,
    },
    row: {
        flexDirection: 'row',
        marginBottom: 5,
    },
    defaultPressable: {
        backgroundColor: 'red',
        padding: 15,
        marginHorizontal: 5,
        borderRadius: 4,
    },
    selectedPressable: {
        backgroundColor: 'black',
        padding: 15,
        marginHorizontal: 5,
        borderRadius: 4,
    },
    letterText: {
        color: 'white',
        fontSize: 18,
    },
});

export default WordsGrid;

关键说明 #

• 用rowIndex和colIndex组合作为每个Pressable的key，确保组件唯一标识，避免渲染异常。
• 通过selectedPosition状态跟踪选中元素，点击时更新状态实现样式切换。
• 使用StyleSheet.create管理样式，比内联样式性能更优，也更易维护。
• 如果需要支持多选，只需把selectedPosition改成数组，点击时添加/移除对应位置即可。

内容的提问来源于stack exchange，提问作者Allexj