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

Question

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

Answer 1

您可以修改代码，使其具有以下样式：

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

</li>

在这里，它将处理您希望将颜色更改为您提到的颜色的情况。当项目确实存在时，您可以更改当前所在的零件，使其颜色为蓝色，如{ color: "blue" }中所示。

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

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

注意：您不能在onClick处理程序中执行您想要的操作，因为单击处理程序回调和NOT可以更改样式。

Answer 2

创建两个Css类，并使用您的三进制放入正确的类