Typescript 如何在用户单击.svg图标或图像时更改其颜色。在这种情况下，我的反应很幼稚

我是新来的。我有两个svg图像。一个是灰色的，另一个是橙色的。所以我希望当用户点击它时，它会变成橙色。那么如何做到这一点。请帮忙。 这是我的密码

 <Svg
          // xmlns="http://www.w3.org/2000/svg"
          width={17.897}
          height={21}
          viewBox="0 0 17.897 21"
        >
          <Path
            data-name="Path 1824"
            d="M8.949 4.435a6.094 6.094 0 00-2.625 11.6l.191-3.688s-.359-.118-.438-.156a1.766 1.766 0 01-.591-.436l-.04-.059-.121-.173a6.109 6.109 0 01-.477-1.172 1.477 1.477 0 01-.048-.181 4.185 4.185 0 01-.041-.589A2.547 2.547 0 016.9 6.968a2.547 2.547 0 012.134 2.613 2.739 2.739 0 01-1.314 2.6l-.441.161.213 4.1a5.978 5.978 0 003.4-.137l.189-3.655a1.959 1.959 0 01-1.188-.824c-.33-.494.254-4.864.254-4.864h.38v4.1h.373v-4.1h.412v4.1h.375v-4.1h.428v4.1h.376v-4.1h.291s.583 4.371.253 4.864a1.965 1.965 0 01-1.176.822l-.017.006.164 3.144A6.095 6.095 0 008.949 4.435zM8.442 1.6a8.949 8.949 0 00-1.655 17.617v-.69a8.282 8.282 0 011.655-16.26v1.614l2.783-1.941L8.442 0v1.6zm0 17.46L11.225 21v-1.813A8.948 8.948 0 0012.8 2.458V3.2a8.28 8.28 0 01-1.575 15.3v-1.381l-2.783 1.94z"
            fill="#f90"
            fillRule="evenodd"
          />
        </Svg>,

,

请参见下面的示例代码：

export default class SVGComponent extends Component {
constructor(props) {
    super(props);

    this.state = {
        // default color
        color: "#000",
    };
}

render() {
    const { color } = this.state;
    return (
        <Svg
            // xmlns="http://www.w3.org/2000/svg"
            width={17.897}
            height={21}
            viewBox="0 0 17.897 21"
            onPress={() => {
                // change SVG color to orange on user click
                this.setState({
                    color: "#f90",
                });
            }}
        >
            <Path
                data-name="Path 1824"
                d="M8.949 4.435a6.094 6.094 0 00-2.625 11.6l.191-3.688s-.359-.118-.438-.156a1.766 1.766 0 01-.591-.436l-.04-.059-.121-.173a6.109 6.109 0 01-.477-1.172 1.477 1.477 0 01-.048-.181 4.185 4.185 0 01-.041-.589A2.547 2.547 0 016.9 6.968a2.547 2.547 0 012.134 2.613 2.739 2.739 0 01-1.314 2.6l-.441.161.213 4.1a5.978 5.978 0 003.4-.137l.189-3.655a1.959 1.959 0 01-1.188-.824c-.33-.494.254-4.864.254-4.864h.38v4.1h.373v-4.1h.412v4.1h.375v-4.1h.428v4.1h.376v-4.1h.291s.583 4.371.253 4.864a1.965 1.965 0 01-1.176.822l-.017.006.164 3.144A6.095 6.095 0 008.949 4.435zM8.442 1.6a8.949 8.949 0 00-1.655 17.617v-.69a8.282 8.282 0 011.655-16.26v1.614l2.783-1.941L8.442 0v1.6zm0 17.46L11.225 21v-1.813A8.948 8.948 0 0012.8 2.458V3.2a8.28 8.28 0 01-1.575 15.3v-1.381l-2.783 1.94z"
                fill={color}
                fillRule="evenodd"
            />
        </Svg>
    );
}

导出默认类SVGComponent扩展组件{
建造师（道具）{
超级（道具）；
此.state={
//默认颜色
颜色：“000”，
};
}
render（）{
const{color}=this.state；
返回(
{
//用户单击时将SVG颜色更改为橙色
这是我的国家({
颜色：#f90“，
});
}}
>
);
}

---

}

如果你是新的反应者，那么从一个简单的步骤开始；更改常规DOM元素的颜色；一旦掌握了这一点，请继续使用SVG。甚至可能不用React。。首先学习如何使用常规的HTML和JavaScript。你添加的所有这些技术让你学会了技巧，而不是底层技术。bajao Taaaaliiiiiigeen dank，graag gedaan