Я создал коллекцию кнопок, используя цикл. Цвет фона этих кнопок меняется одна за другой, по одной кнопке за раз. Есть ли способ получить ключ кнопки, цвет фона которой черный при вызове функции.
export default class App extends Component<Props> {
constructor(props) {
super(props);
this.state = {
selectedControl: 0,
controls: ["TITLE1", "TITLE2", "TITLE3"]
};
}
componentDidMount() {
this.timerHandle = setInterval(() => {
this.setState(({selectedControl, controls}) =>
({selectedControl: (selectedControl + 1) % controls.length})
);
}, 1000);
}
render() {
const {selectedControl, controls} = this.state;
return (
<View style = {{ flex: 1, flexDirection: 'row', flexWrap: 'wrap', justifyContent: 'space-evenly',
alignItems: 'stretch' }}>
{controls.map((control, index) => (
<Button key = {control} title = {control} buttonStyle = {index === selectedControl ? styles.highlighted : styles.buttonStyle}/>
))}
</View>
);
}
}
const styles = StyleSheet.create({
buttonStyle: {
height: '100%',
},
highlighted: {
height: '100%',
backgroundColor: 'black',
}
});



![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)


Клавиши кнопок установлены на control. Итак, проверьте, когда кнопка выделена (например, index === selectedControl) в render, а клавиша кнопки — control.
<View style = {{
flex: 1,
flexDirection: 'row',
flexWrap: 'wrap',
justifyContent: 'space-evenly',
alignItems: 'stretch'
}}>
{controls.map((control, index) => {
if (index === selectedControl) {
console.info({"key": control}) /* <-- here */
}
return <Button key = {control} title = {control} buttonStyle = {index === selectedControl ? styles.highlighted : styles.buttonStyle}/>
})}
</View>