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

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

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

Answer 2

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

不过，为了给您一个基本的概述，当您单击按钮 (onClick) 时，您将调用一个更改状态的函数，从而导致 re-render，其中 re-render，您将拥有像这样的条件...

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

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

React Native: onPress: How can I toggle the button text and function call?

button

toggle

react-native

onpress