Отображение активной кнопки
В моем приложении много кнопок. Теперь я хочу сделать их динамически активными, то есть, если пользователь предполагает, что нажимает первую кнопку, эта кнопка должна иметь другой цвет, чем другие кнопки.
То есть в моем приложении есть разные диаграммы, если пользователь нажимает кнопку, чтобы отобразить первую диаграмму, кнопка для этого должна иметь зеленый цвет, а оставшаяся - # 841584
Как я могу этого добиться?
<View style = {button}>
<Button
style
onPress = {() => this.changeHistoryChart(1)}
title = "Today"
color = "#841584"
/>
<Button
onPress = {() => this.changeHistoryChart(7)}
title = "1W"
color = "#841584"
/>
<Button
onPress = {() => this.changeHistoryChart(30)}
title = "1M"
color = "#841584"
/>
<Button
onPress = {() => this.changeHistoryChart(90)}
title = "3M"
color = "#841584"
/>
<Button
onPress = {() => this.changeHistoryChart(180)}
title = "6M"
color = "#841584"
/>
<Button
onPress = {() => this.changeHistoryChart(365)}
title = "1Y"
color = "#841584"
/>
</View>
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 4
Во-первых, все ваши кнопки должны иметь что-то вроде этого
<Button
style
onPress = {() => this.changeHistoryChart(1)}
title = "Today"
color = {this.state.chosenButton === 1 ? 'red': "#841584"} // Put whatever color you like instead of red
/>
Это состояние selectedButton будет служить для контроля того, какая кнопка нажата, что означает, что все ваши кнопки должны иметь различное состояние внутри цветовой опоры, которое имеет тот же номер, что и тот, который вы передаете в функции changeHistoryChart this.state.chosenButton === 7 и так далее ...
Внутри changeHistoryChart делать
this.setState({chosenButton: theNumberYouPassedAsPropToChangeHistoryChart})
Это должно решить вашу проблему
Самый простой способ, который я могу придумать, - это просто создать функцию, которая будет возвращать цвет на основе заданного значения и текущей диаграммы истории и вызывать это при установке цвета вашей кнопки. Например:
changeHistoryChart(val) {
this.setState({currentChart: val});
}
getButtonColour(val) {
return val === this.state.currentChart? '#0F0' : '#841584';
}
Я не совсем уверен, как выглядит функция changeHistoryChart, так что это всего лишь простая оценка. Затем при рендеринге кнопки вы можете сделать что-то вроде:
<Button
onPress = {()=>this.changeHistoryChart(365)}
title = "1Y"
color = {this.getButtonColour(365)} />
- определить массив кнопок, например ["1 м", "3 м", ..]
- использовать функцию карты для рендеринга вида
- setState ({currentIndex: index}) при нажатии кнопки
- color = {this.state.currentIndex === index? 'красный': "# 841584"}
Я попробовал это, и это сработало, кстати, это долгий путь; Сначала установите флаг для каждого из них, например:
constructor(props){
super(props);
this.state = {
button_1 : false,
button_2 : false,
button_3 : false,
button_4 : false,
}
затем для каждого Button выполните следующее:
<Button
title = "Button 1"
color = {this.state.button_1 ? "green" : "gray"}
onPress = {() => {
this.setState({
button_1: !this.state.button_1,
button_2: false,
button_3: false,
button_4: false
});
}}
/>
<Button
title = "Button 2"
color = {this.state.button_2 ? "green" : "gray"}
onPress = {() => {
this.setState({
button_1: false,
button_2: !this.state.button_2,
button_3: false,
button_4: false
});
}}
/>
сделайте это и для других кнопок, это будет работать
@KuchBhi Я много искал об этой проблеме, но не нашел другого способа ее решить, я знал именно так.
Да, я изначально думал о той же идее, но по какой-то причине я не фанат создания дополнительных состояний в компоненте. Я думаю о реализации Lazar Answer, но все же спасибо :)