button - react native : onPress: How can I toggle the button text and function call?

Question

我有一个看起来像这样的按钮......

<View style={styles.addToFavoritesStyle}>
  <Button onPress={this.addToFavorites}>ADD TO FAVORITES</Button>
</View>

addToFavorites() {
  ...run some code
}

用户按下按钮后，如何将按钮文本更改为“REMOVE FROM FAVORITES”，更改按钮样式并调用不同的函数？

Answer 1

您需要利用状态。在您的组件中添加一个构造函数:

constructor(props) {
  super(props);
  this.state = {
    inFavorites: false
  }
}

让你的 Button 看起来像这样:

<Button onPress={this.addToFavorites}>
  {this.state.inFavorites ? "REMOVE FROM " : "ADD TO " + "FAVORITES"}
</Button>

在您的 addToFavorites() 函数中添加一个设置组件状态的调用:

this.setState({ inFavorites: true});

这不是一个包罗万象的示例，但它将设置您的组件的状态。当他们从收藏夹中删除该项目时，您必须再次设置状态。