Попытка изменить значок для одного элемента списка
Я пытаюсь создать компонент расширяемого списка. Когда я нажимаю на элемент списка, Я хочу, чтобы значок справа от него изменился. Прямо сейчас, когда нажимается элемент списка, каждая иконка будет изменена. Я хочу, чтобы изменился только значок этого конкретного элемента. Был думал об этом в течение 20 минут и решил, что обращусь за помощью. Спасибо!
import { List, ListItem } from 'react-native-elements';
export default class ExpandingList extends Component {
constructor(props){
super(props)
this.state = {
visibleItems: false
}
}
toggleMenu(){
this.setState({
visibleItems: !this.state.visibleItems
})
};
render() {
const list = "list 1, list 2, list 3";
return (
<View>
<List>
{
list.map((item, i) => (
<ListItem
onPress = { () => this.toggleMenu() }
key = {i}
rightIcon = {this.state.visibleItems ? iconRight : iconDown}
title = {item} />
))
}
</List
</View
)
}
}
логическое извинение по этому поводу
Вам нужно поддерживать список элементов, по которым щелкнули, а не одно логическое значение.
понятно. Кевин помог мне внизу. Спасибо!
Ответы 2
Вы вводите логическое значение, и все элементы списка имеют одно и то же значение. Чтобы добиться того, чего вы хотите, вам нужно передать уникальное значение, в этой ситуации я использую индекс, но в идеале у вас будет уникальный идентификатор помимо индекса.
Ниже должно быть достигнуто то, что вы ищете
import { List, ListItem } from 'react-native-elements';
export default class ExpandingList extends Component {
constructor(props){
super(props)
this.state = {
visibleItems: null
}
}
toggleMenu(itemIndex){
this.setState({
visibleItems: itemIndex
})
};
render() {
const list = "list 1, list 2, list 3";
return (
<View>
<List>
{
list.map((item, i) => (
<ListItem
onPress = { () => this.toggleMenu(i) }
key = {i}
rightIcon = {this.state.visibleItems === i ? iconRight : iconDown}
title = {item} />
))
}
</List
</View
)
}
}
Примечание: я предполагаю, что у вас уже есть этот рендеринг, но для других людей. Список const представляет собой строку, разделенную запятыми, а строка не имеет функции сопоставления.
Также в приведенном выше коде не учитывается отмена выбора элемента списка, который уже был выбран. Это можно сделать, проверив значение в состоянии и вернув значение обратно к нулю, если оно такое же.
вот и получилось! да, я набирал его из своего фактического кода вместо того, чтобы копировать / вставлять. Изначально это был массив строк list = ["list 1" , "list 2", ... ] . хороший улов! спасибо за вашу помощь: D
Вот способ сделать это также:
import React from "react";
import ReactDOM from "react-dom";
class App extends React.Component {
state = {
visibleItem: 0
};
select = i => {
this.setState({
visibleItem: i
});
};
render() {
const items = [1, 2, 3, 4];
return (
<React.Fragment>
{items.map((v, i) => {
return (
<div
style = {{ color: this.state.visibleItem === i ? "red" : "black" }}
onClick = {() => this.select(i)}
>
{v}
</div>
);
})}
</React.Fragment>
);
}
}
const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);
Рабочий пример здесь.
Что должны удерживать видимые предметы?