button - React Native：onPress：如何切换按钮文本和函数调用？

Question

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

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

addToFavorites() {
  ...run some code
}

用户按下按钮后，如何将按钮文本更改为“从收藏夹中删除”，更改按钮样式并调用不同的函数？

Answer 1

你会想要利用状态。在您的组件中添加一个构造函数：

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

使您的按钮看起来像这样：

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

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

this.setState({ inFavorites: true});

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

Answer 2

这是一个相当基本的问题，我建议你在来这里之前阅读 React 文档。

不过，为了给您一个基本的概述，当您单击按钮（onClick）时，您将调用一个更改状态的函数，从而导致重新渲染，在该重新渲染中，您会遇到这样的情况......

{this.state.addedToFavorites ? "Remove from favorites" : "Add to favorites"}