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

Posted 2023-04-18

【中文标题】React Native：onPress：如何切换按钮文本和函数调用？

【英文标题】：React Native: onPress: How can I toggle the button text and function call?

【发布时间】：2018-08-13 19:20:36

【问题描述】：

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

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

addToFavorites() 
  ...run some code

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

【参考方案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 文档。