Onpress with conditional不调用函数
是指在前端开发中，当用户点击某个按钮时，根据特定条件来执行相应的操作，而不需要调用额外的函数。
在React Native中，可以使用TouchableOpacity组件来实现按钮的点击事件。当用户点击按钮时，可以通过设置onPress属性来指定相应的操作。同时，可以使用条件语句来判断特定条件是否满足，从而决定是否执行相应的操作。
以下是一个示例代码：
import React, { useState } from 'react';
import { TouchableOpacity, Text } from 'react-native';
const App = () => {
const [isPressed, setIsPressed] = useState(false);
const handlePress = () => {
if (isPressed) {
// 执行操作A
console.log('操作A');
} else {
// 执行操作B
console.log('操作B');
}
};
return (
<TouchableOpacity onPress={handlePress}>
<Text>按钮</Text>
</TouchableOpacity>
);
};
export default App;在上述代码中，使用useState钩子来定义一个状态变量isPressed，初始值为false。当用户点击按钮时，会触发handlePress函数。在handlePress函数中，通过条件语句判断isPressed的值，如果为true，则执行操作A，否则执行操作B。
这里没有提及具体的腾讯云产品和产品介绍链接地址，因为该问题与云计算领域的专业知识、腾讯云产品等没有直接关联。如果有其他与云计算相关的问题，欢迎提问。
相关·内容
3回答
React挂钩setstate更改仅反映第一个更改
javascript、reactjs、react-hooks
我正在尝试有一个食物过滤页面，在那里用户按下按钮来指示他们的偏好，这样在确认时，我将能够使用键"area", "cuisine" and "price"将用户的偏好存储为对象上。在尝试了各种组合之后，我得到的记录对象只反映了第一次更新时的更改，即区域。{"area": "South", "cuisine": Array [], "price": -Infinity }而不是{"area":"South", "cuisine":
浏览 23提问于2020-06-18得票数 0
回答已采纳
1回答
react本机组件中的状态更新问题
react-native、expo、state
我有一个数组，其中包含我想要显示的值，然后如果用户按下编辑按钮，表示将更改为TextInput组件列表。编辑完成后，用户可以按“保存”或“取消”。如果按下“取消”，则不应将textInput字段中的值保存到原始值数组中。
我的问题是，即使按下Cancel，原始数组中的数据似乎也会被更新。
这是代码：
`
const handlePress = (text, index) => {
const newSchedule = [...scheduleTempState]
newSchedule[index].value = text
setSched
浏览 2提问于2022-03-31得票数 0
回答已采纳
2回答
如何在反应性映射组件上进行独立的样式更改
reactjs、react-native、react-component
当我试图更改映射TouchableOpacity的样式时，我遇到了问题。
我映射了一个TouchableOpacity列表，我希望当我单击其中一个时，backgroundColor更改(黑色)只在我单击的on上，但也可以重置我以前单击的另一个TouchableOpacity的backgroundColor。
例如，如果我点击第一个TouchableOpacity，它的背景就变黑了。然后，如果我点击第二个，第二个的背景变成黑色，而第一个的背景又变成灰色。
export default class Playground extends Component {
state = {
浏览 0提问于2019-07-08得票数 1
回答已采纳
3回答
返回JSX组件onPress react-native
reactjs、react-native、jsx、onpress
我想提示用户获取输入onPress，但是从onPress返回JSX从来都不起作用，那么基于按钮单击返回JSX有什么可能的变通方法呢？下面是我的代码： import React, { useState } from 'react';
import {
StyleSheet,
KeyboardAvoidingView,
View,
Text,
TouchableOpacity
} from 'react-native';
import InputPrompt from './InputPrompt'
co
浏览 29提问于2020-07-05得票数 1
回答已采纳
1回答
在react-native上使用挂钩
react-native
我已经编写了钩子来处理我的expo应用程序上的多个图像选择。
import { useCallback, useState } from 'react';
import { CameraRoll } from 'react-native';
export function useCameraRoll({
first = 40,
assetType = 'Photos',
groupTypes = 'All',
}) {
const [photos, setPhotos] = useState([]);
con
浏览 1提问于2020-04-09得票数 0
3回答
在react中，本机要根据登录电子邮件获取主页数据
express、react-native
在我用电子邮件密码登录的项目中，在想要根据登录的电子邮件获取主页数据之后，API将返回特定用户的响应数据，在useState()中，我传递了静态电子邮件，我需要它来更改动态主页代码:
```import React,{useState} from 'react';
从“反应-本地纸”导入{ Button}；
进口{
观看，
文本，
StatusBar，
TouchableOpacity，
KeyboardAvoidingView，
警报
}从“反应-本地”开始；
const ProductScreen = (props) => {
const email= useStat
浏览 4提问于2020-02-19得票数 0
2回答
如何扩展卡onPress -反应本机
react-native
我正在尝试制作一个票务应用程序，允许人们根据需要完成的工作来创建门票。现在，我需要对每张票卡的可扩展视图的帮助。我想要的是当用户按下一个特定的卡，它将扩大视图，并提供更多的细节，只为该卡。它目前正在为列表中的每一张票证扩展视图。我是新来的反应本地人，并尽我最大的努力，但到目前为止，没有任何工作。
这是我的父母，叫做家：
import React, {useState, useEffect} from 'react';
import {styles, Colors} from '../components/styles';
import { SafeAreaVie
浏览 4提问于2022-03-23得票数 0
2回答
如何在样式表外更改样式表属性？React Native
javascript、reactjs、react-native
我举了这个例子： import React from 'react';
import { StyleSheet, Text, View, TouchableOpacity } from 'react-native';
export default function App() {
const handlePress = e => {
styles.button.borderColor = '#FF0000';
};
return (
<View style={styles.container}>
浏览 16提问于2020-03-22得票数 0
回答已采纳
2回答
如何在React中的setState中嵌入onPress警报函数
javascript、react-native、alert
目前，我正在使用在React中更改onPress事件中状态的方法--本地的，而且运气不太好。当有人按下“变更状态”时？选项的调用警报中，我希望将状态更改为true。但是，当调用setState()或切换状态的useCallback()时，它将继续打印打印false print (两次)。
FYI:我将警报称为ExampleAlert()，而不是代码中的<ExampleAlert />。
此问题是否与用RN编写警报的方式有关，还是与警报不触发重呈现有关？
const [state, setState] = useState(false);
const changeState
浏览 5提问于2021-11-03得票数 1
3回答
如何在本机反应中启动另一个组件
android、react-native
我正在学习react-native编程，index.android.js中只有一个组件。我在这个组件中有一个TouchableOpacity。我想开始下一个组件点击TouchableOpacity。
<TouchableOpacity style={{ height: 40, marginTop: 10 , backgroundColor: '#2E8B57'}} onPress={}>
<Text style={{color: 'white', textAlign: 'center', marginTop: 10, f
浏览 3提问于2017-01-24得票数 0
回答已采纳
1回答
AsyncStorage中的React本机密钥
reactjs、react-native、react-native-android、react-native-flatlist、asyncstorage
我是React Native的新手，我想在我的项目中应用AsyncStorage。我正在做一个项目，我可以在扁平表中添加教室，然后在每个教室中，我可以使用扁平表添加每个班级的学生名称。Asyncstorage将应用于课堂列表和学生列表。 我的期望是，我添加了教室A，教室B和教室C，然后当我按下教室A时，我可以添加学生的名字，当我进入B教室时，名字列表仍然是空的，等待我填充列表。 我的实际结果是，在我在教室A中添加studentA、studentB、studentC之后，当我转到教室B时，教室A中的3个学生仍然在教室B的列表中。 那么，我如何解决这个问题，以满足我的要求，或者它将是非常有帮助的
浏览 31提问于2021-09-19得票数 0
回答已采纳
1回答
分别切换多个按钮的背景色
react-native、button、react-hooks、state、render
我正在使用map一次渲染多个按钮。我想要一个按钮的背景颜色在我按下它时改变，但是现在当我按下一个按钮时，所有按钮的颜色都改变了。我可以为每个按钮创建状态，看看它是否被选中，但如果我有一大堆按钮，那就不实用了。有什么解决方法吗？
const [selected, setSelected] = React.useState(false);
const genres = ["Adventure", "Arts", "Leisure", "Nature"];
const onSelect = () => setSelected
浏览 7提问于2020-05-27得票数 0
回答已采纳
1回答
事件处理程序中的调用方法未定义。
javascript、reactjs、react-native、es6-class
当不需要任何参数时，handleButtonPress函数在以下示例中工作.
import React, { Component } from 'react';
import {View, Text, TouchableOpacity} from 'react-native';
export default class MyComponent extends Component {
constructor(props){
super(props)
this.state = {message:"HELLO"}
this
浏览 3提问于2016-10-17得票数 0
回答已采纳
1回答
我正在使用导航转到Reacti原住民上的另一个页面，我已经尝试过导航& React
react-native
我正在使用导航转到Reacti原住民上的另一个页面，我已经尝试过导航& React。我想去Home.js。我尝试过使用NavigationContainer & reateStackNavigator，并对Dom做出反应。
我似乎找不到解决这两个问题的办法，而且YouTube的视频也没有真正的帮助。
import {
StyleSheet,
Text,
SafeAreaView,
Image,
View,
TouchableOpacity,
} from 'react-native';
import React,{ useSt
浏览 3提问于2022-08-06得票数 0
1回答
react本机导航刷新组件问题
react-native
我在类别页面中，当我按下其中任何一个时，它会导航到该类别的产品列表。到目前一切尚好。当我返回并按下另一个类别时，我会看到以前的类别产品列表。 这是我的一些代码 这就是我导航到产品列表的方式 render() {
const {navigation} = this.props.navigation;
const categories = category.map((item, index) => {
return (
<TouchableOpacity
key={index}
styles={sty
浏览 11提问于2021-04-14得票数 0
1回答
react本机延迟状态为什么需要700ms-1秒？
react-native、expo
我有一张产品卡。您可以选择颜色。 所以我还有一个Color组件。 如果你选择一种颜色，我会像这样为selectedColor设置一个状态： setSelectedColor(color); 所以我也把当前的颜色发送给了主要组件(产品卡)。 因此，如果按下selectedColor或像这样进行更改，我也会使用useEffect： const [selectedColor, setSelectedColor] = useState('');
const handleChooseColor = color => {
setSelectedColor(color);
};
浏览 8提问于2021-08-12得票数 0
2回答
React本机-减少呈现时间，以优化性能，同时使用React
reactjs、react-native、react-hooks、react-context
背景
在发布React v16.8之后，现在我们可以使用钩子来响应本机了。
我正在做一些简单的测试来查看呈现时间和
钩式功能组件和类组件。这是我的样本：
@Components/Button.js
import React, { memo } from 'react';
import { TouchableOpacity, Text } from 'react-native';
const Button = memo(({ title, onPress }) => {
console.log("Button render"); //
浏览 2提问于2020-05-26得票数 4
回答已采纳
1回答
FlatList onPress函数重建器在更新后会导致延迟
reactjs、react-native、react-functional-component
因此，我们有一个平面列表，大约有200/300个按钮，这些按钮被传递给一个函数，在5次点击后显示一个广告。因此，我们使用useState来计算单击次数。
但是..。因为我们更新了函数中的计数，所以它再次调用selfs，并重新排列所有平面列表项目/按钮，并导致滞后/延迟。
“您的滞后是什么意思？”例如，通常可以垃圾邮件点击按钮，这一切都很好，但是当setCount(prev => prev +1)被取消评论时，它只是缓慢地冻结和落后。
码
import React, {useCallback, useState} from 'react';
import {Touchabl
浏览 2提问于2020-10-20得票数 1
2回答
反应，渲染不同的组件并保持滚动位置。
reactjs、react-native
假设你有一个水平平面图。
当用户单击项目中的按钮时，您希望呈现一个与您所拥有的平面列表项不同的视图。
假设您实现它，如下所示
{showDetail ? (
<DetailView onPress={toggleShowDetail} />
) : (
<FlatList
data={data}
renderItem={() => (
<View>
<Button onPress={toggleShowDetail} /&
浏览 5提问于2020-07-01得票数 0
2回答
反应本机-有方法隐藏/显示一个项目在另一个页面？
javascript、reactjs、react-native、react-redux、expo
我试图通过标记在"SettingsScreen".中找到的"BOB“CheckBox来隐藏\显示"InfoTable"屏幕上的我是新来的反应本土化的，我不知道怎么回事。有人可以教我如何简单地用我的例子做这件事？
这是"OrderInformationScreen“
export default class OrderInformationScreen extends Component {
constructor(props) {
super(props);
const { state } = p
浏览 2提问于2020-02-23得票数 1
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
实时音视频
即时通信 IM
对象存储活动推荐
腾讯云开发者
