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"}

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

2 个答案: