React Как запустить onClick каждый из функции карты
У меня есть несколько сопоставленных списков, и я хотел бы запустить 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){
}
Однако я не знаю, как заполнить код для этой проблемы. Подскажите пожалуйста, верна ли моя идея и несколько подсказок.
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 2
Вам нужно будет оставить "нажата ли кнопка?" информация в 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 информацию, вы рассказать это то, как он должен выглядеть в зависимости от состояния.
Пожалуйста, взгляните на этот код отображение данных с элементами реакции
Чтобы решить эту проблему, у вас может быть состояние, которое отслеживает взаимодействие для группы элементов, в вашем случае это список элементов. здесь вы можете использовать карту в переменной состояния и иметь пару {ключ, значение}, связанную с каждым элементом, чтобы отслеживать его. Надеюсь это поможет. Спасибо.
onClick = {() => this.handleClick(list)}- передавайте все, что хотите, вhandleClick