Question

我正在尝试在React Native中创建一个数字着色页。我的目标是当用户按下单个SVG路径时，它会更改其填充颜色。

问题在于onPress事件处理程序不能专门应用于Paths，因此我不得不将其添加到TouchOpacity。我需要从onPress事件中了解选择了哪个路径。我在每个路径中都添加了名称和ID，但无法弄清楚如何从click事件中提取这些属性。

const selectedColor = '#FF0000';
const [ color1, setColor1 ] = useState(WHITE);
const [ color2, setColor2 ] = useState(WHITE);
const [ color3, setColor3 ] = useState(WHITE);

const onPressSvg = (event) => {
    const num = // <--- IDK?

    switch (num) {
        case 1: setColor1(selectedColor); break;
        case 2: setColor2(selectedColor); break;
        case 3: setColor3(selectedColor); break;
    }
};

return (
    <TouchableOpacity onPress={onPressSvg}>
        <Svg viewBox="0 0 144 144">
            <Path
                id="1"
                name="1"
                fill={color1}
                d="..."
            />
            <Path
                id="2"
                name="2"
                fill={color2}
                d="..."
            />
            <Path
                id="3"
                name="3"
                fill={color3}
                d="..."
            />
        </Svg>
    </TouchableOpacity>
);

Answer 1

好吧，目前为止效果很好。我看到Web和IOS返回了不同的事件对象。这不是最漂亮的解决方案，但我暂时还没有解决。是的！

generated random binary strings: [0, 0, 0, 0, 0, 1, 1, 0]
generated bell states: ['b', 'c', 'b', 'a', 'a', 'c', 'b', 'b', 'd', 'd', 'd', 'c', 'c', 'b', 'a', 'd', 'd', 'b', 'c', 'c', 'd', 'c', 'd', 'b', 'd', 'c', 'a', 'd', 'c', 'd', 'c', 'c', 'b']
encrypted strings: [0, 1, 0, 0, 0, 1, 0, 0, 1, 1, 1, 1, 1, 0, 1, 0, 0, 1, 0, 0, 0, 0, 0, 1, 1, 1, 0, 1, 1, 1, 1, 1, 0]

从onPress事件反应本机获取元素属性

1 个答案: