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

编程问答 2022-06-11

问题描述

我正在尝试在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>

解决方法

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

,

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

<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来更改样式。

if-statementjavascriptreactjsreactjsreactjsreactjs