Question

我有两个按钮可以执行两个操作，是否只有一个按钮可以更改文本及其操作？

<TouchableOpacity style={styles.button} onPress={() => this.stopFunction()}>
    <Text style={styles.buttonTesto}>STOP</Text>
</TouchableOpacity>

<TouchableOpacity style={styles.button} onPress={() => this.startFunction()}>
    <Text style={styles.buttonTesto}>START</Text>
</TouchableOpacity>

因此第一次是启动，当用户单击时，按钮将启动startFunction并更改Stop中的文本。

Answer 1

我想您正在运行一个状态变量

this.state = { running : true }

现在，在您的render方法内部获取状态数据：

const { running } = this.state

您的按钮应如下所示：

<TouchableOpacity style={styles.button} onPress={() => this.uniqueFunction()}>
  <Text style={styles.buttonTesto}>
      { running ? 'STOP' : 'START'} 
  </Text>
</TouchableOpacity>

现在，您的独特功能必须执行两个操作，具体取决于应用程序的运行状态：

uniqueFunction = () => {
    const { running } = this.state
    if( running ) {
       // The action you want to do when start button is pressed
    }else
      // The action you want to do when stop button is pressed

}

Answer 2

您需要一个状态变量，然后可以根据变量的值使用条件渲染。像这样：

<TouchableOpacity style={styles.button} 
  onPress={() => {this.state.flag ? this.stopFunction() : this.startFunction()}}
>
    <Text style={styles.buttonTesto}>{this.state.flag? "STOP" : "START"}</Text>
</TouchableOpacity>

一个按钮可以做不同的事情吗？

2 个答案: