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

【问题标题】：How to change a style of an element in React.js in onClick function [duplicate]如何在onClick函数中更改React.js中元素的样式[重复]
【发布时间】：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 类或样式值。

标签： javascript css reactjs if-statement

【解决方案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 更改样式。

【讨论】：