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

【问题标题】：React Native: onPress: How can I toggle the button text and function call?React Native：onPress：如何切换按钮文本和函数调用？
【发布时间】：2018-08-13 19:20:36
【问题描述】：

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

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

addToFavorites() {
  ...run some code
}

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

【问题讨论】：

标签： button react-native toggle onpress

【解决方案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});

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

【讨论】：

【解决方案2】：

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

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

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

【讨论】：

谢谢，我会查看 React 文档。