如何解决如何在onClick函数中更改React.js中元素的样式
我正在尝试在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
来更改样式。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。