作者热门文章
- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
我有一些已映射的列表,当我单击一个元素(这是数组中的对象之一)时,我想触发 onClick。
假设有 3 个列表,当我单击其中一个列表时,我想将“我单击的元素”的类从“关闭”更改为“打开”。
state= {
open: false
}
handleClick = () => {
this.setState({
open: !this.state.open
})
}
Array.map((list, index) => {
<div key={index} onClick={this.handleClick}>
<p className={this.state.open? 'open' : 'close'}>{list.title}</p>
</div>
})
.
Array = [{
title: 'a',
link: '/service/wallet'
},{
title: 'b',
link: '/service/home'
}]
我的值为 this.props.location.pathname
,我想我可以将其与 Array[i].link
进行比较。
类似这样的东西吗?
if(this.props.location.pathname === Array[0].link){
}
但是,我不知道如何完成这个问题的代码。请告诉我的想法是否正确以及一些提示。
最佳答案
您需要保留“是否被点击?” this.state
中的信息。因为它是您需要跟踪的事物的列表,所以您无法将状态存储在单个变量中,因此您需要它们的映射。
state= {
open: {}
}
handleClick = (link) => {
let linkOpenState = false;
if (this.state.open.hasOwnProperty(link)) {
linkOpenState = this.state.open[link];
}
this.setState({ open: { [link]: linkOpenState } })
}
Array.map((list, index) => {
<div key={index} onClick={this.handleClick.bind(this, list.link)}>
<p className={this.state.open[list.link]? 'open' : 'close'}>{list.title}</p>
</div>
})
你需要习惯于“React 方式”思考。状态需要保持在组件状态中(或者如果复杂性成为问题,那么看看 Redux)。您不会强制操作 DOM,也不会“询问”DOM 获取信息,您告诉它根据状态应该如何显示。
关于javascript - React 如何从 map 函数中触发每个 onClick,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/53262169/
我是一名优秀的程序员,十分优秀!