如何在onClick函数中更改React.js中元素的样式[重复]

Posted 2023-03-16

【中文标题】如何在onClick函数中更改React.js中元素的样式[重复]

【英文标题】：How to change a style of an element in React.js in onClick function [duplicate]

【发布时间】：2021-01-14 02:49:29

【问题描述】：

我正在尝试在 react.js 的条件渲染中更改列表元素的颜色。

onClick=exist ? () => this.handleClick(); this.props.updateSummary(store_id) : null 

我想要style="color :#E8E8E8" 而不是:null。在进行条件渲染时，似乎我不能在 onClick 函数中使用内联样式。任何想法如何做到这一点？ 谢谢

<ul>
   this.props.stores.map((exist, store_id) => (
      <li className ="storeIdList" onClick=exist ? () => this.handleClick(); this.props.updateSummary(store_id) : null >Store Id: store_id</li>
   ))
</ul>

【问题讨论】：

只是...这里的样式在哪里？与className 或style 属性无关...

你 有 storeIdList 类。如果存在是真的，你想要style="color :#E8E8E8"？

@PankajShukla 如果存在我希望this.handleClick(); this.props.updateSummary(store_id) 运行此函数，如果不存在：然后更改样式。谢谢

@sjahan，我想在 :null 的位置添加样式，但我不知道该怎么做。

这能回答你的问题吗？ Correct way to handle conditional styling in React 你必须使用className 或至少style 你不能在onClick 中这样做。 onClick 会触发你的 state 的变化，这个状态将用于选择 CSS 类或样式值。

【参考方案1】：

创建两个 Css 类，并使用您的三元组放置正确的类

【参考方案2】：

您可以修改您的代码以具有如下样式：

<li
        style=!exist ?  color: "#E8E8E8"  :  color: "blue" >
        
</li>

在这里，它将处理您希望将颜色更改为您提到的颜色的情况。当该项目确实存在时，您可以更改它现在所在的部分，使颜色变为蓝色，如 color: "blue" 。

查看此链接以获取完整示例： https://codesandbox.io/s/admiring-silence-57isz?file=/src/App.js

这意味着您必须在: 之后的部分中将所有属性作为对象提供。 换句话说，将类 storeIdList 中定义的属性复制到条件表达式的 else 部分中。

注意：你不能在 onClick 处理程序中做你想做的事情，因为那是点击处理程序回调和 NOT 更改样式。