如何使用 useState 钩子将我的反应图标的颜色更改为蓝色？

Question

我想使用 useState 挂钩在单击其中一个时将边栏中的反应图标颜色更改为蓝色。我试过这个

const [changeColor, setChangeColor] = useState('blue');

然后在 return

<IconOuter onClick={() => setChangeColor(changeColor)}>
  
  {item.icon}

我想知道我做错了什么？任何帮助将不胜感激。谢谢。

经过进一步检查，我使用组件样式设置了样式，所以这是我的 css 图标。看起来图标周围有一个跨度，可能更容易设置样式。

const IconOuter = styled.span`
  background-color: white;
  border-radius: 5px;
  padding: 10px;
  width: 44px;
  height: 44px;
  left: 8px;
  top: 8px;
`;

Answer 1

当使用useState钩子时，你创建了一个变量和一个方法，变量用来存储状态，方法用来改变变量的值。变量的初始值是从 useState 钩子中的值获得的，您可以稍后使用从 useState 钩子

中定义的方法更改该值

这是useState钩子的基本形式：

const [state, setState] = UseState(<initial state>)

所以你的代码应该是：

const [myColor, setmyColor] = useState('white'); //the color is currently white

<IconOuter onClick={() => setColor('blue')} />

const IconOuter = styled.span`
  background-color: ${ myColor };
  border-radius: 5px;
  padding: 10px;
  width: 44px;
  height: 44px;
  left: 8px;
  top: 8px;
`;

Answer 2

我可以看到此状态的默认值为蓝色，在您的代码中，您只需调用 setChangeColor 并再次传递 'blue' 所以如果您再次单击它并老化，状态仍然是蓝色，因为您只需将 'blue' 传递给您的 changeColor 状态方法（setChangeColor()）。所以我只能看到状态始终获得与默认值相同的值。您没有放置其余代码，但在您在此处共享的这一小段代码中，我可以看到您没有在任何地方使用此状态值。

Answer 3

您可以尝试内联 CSS as

<IconOuter onClick={()=>setChangeColor('blue')} style={{color:changeColor}}/>

如果您想要组件样式，请尝试在 CSS 中使用 color 而不是 background-color。

Answer 4

这是一个可能有用的示例。在这种情况下，我想在用户单击一次时更新心形 IonIcon 的颜色，因此我首先将其包裹在 touchableOpacity 中以获得闪烁效果。如果你不想包裹它，你只需将 onPress 功能放在图标内。

function MyComponent= () => {
    const [defaultcolor, setNewColor] = useState('white')
    return (
        <View>
            <TouchableOpacity style={styles.MyRoundButtonStyle} onPress={() => 
                  setColor('green')} >
                <Ionicons name="heart" size={50} color={defaultcolor} />
            </TouchableOpacity>
        </View>
)};

export default MyComponent;

请注意，在 IonIcons 中，我没有使用 color='green' 等，而是使用状态挂钩的初始状态名称 (defaultcolor)。请注意，它只是一个名称，您可以将其设置为 'mycolor' 等任何名称。您可能熟悉类似 [state, setState] 的命名约定，它只是一个选择。

如果您需要更清楚地了解这一点，请告诉我。

如何使用 useState 钩子将我的反应图标的颜色更改为蓝色？

How do I use the useState hook to change the color of my react icons to blue?

javascript

reactjs

icons

use-state