Question

我的应用程序中有很多按钮，现在我想使它们动态激活，这意味着如果用户假设单击第一个按钮，则该按钮应具有与其他按钮不同的颜色。

即我的应用程序中有不同的图表，如果用户单击该按钮以显示第一个图表，则该按钮的按钮应为绿色，而其余按钮为＃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>

Answer 1

首先，您所有的按钮都应具有类似的内容

<Button
  style
  onPress={() => this.changeHistoryChart(1)}
  title="Today"
  color={this.state.chosenButton === 1 ? 'red': "#841584"} // Put whatever color you like instead of red
/>

此selectedButton状态将用于控制按下的按钮，这意味着您的所有按钮在color prop内部应具有不同的条件，该条件与您在changeHistoryChart函数this.state.chosenButton === 7中传递的数字相同。 ...

内部changeHistoryChart做

this.setState({chosenButton: theNumberYouPassedAsPropToChangeHistoryChart})

这应该可以解决您的问题

Answer 2

我能想到的最简单的方法是只创建一个函数，该函数将根据给定的值和当前历史记录图表返回一种颜色，并在设置按钮的颜色时调用该函数。例如：

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)} />

Answer 3

定义按钮数组，例如[“ 1m”，“ 3m”，..]
使用地图功能来呈现视图
setState（{currentIndex：index}）
color = {this.state.currentIndex ===索引？ 'red'：“＃841584”}

Answer 4

我尝试了一下，但效果很好，但还有很长的路要走；首先为它们每个设置一个标志，例如：

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
                         });
               }}
  />

也可以对其他按钮执行此操作，

显示活动按钮

4 个答案: