javascript - 当我单击 native react 按钮时如何显示或切换文本?

标签 javascript reactjs react-native react-hooks

我的代码无法正常工作,我的代码出了什么问题? 我正在尝试创建一个简单的问答应用程序,我分享了下面的代码示例,在下面的示例中,如何默认隐藏答案并在单击按钮时显示答案? 感谢您的支持。

import React, { useEffect, useState } from "react";
import {View, Text, StyleSheet, Button} from 'react-native'
const Testing = () =>{

  const [showValue, setShowValue] = useState(false);

return (
  <View style={{
    backgroundColor: '#f1f1f1',justifyContent: 'center', alignItems: 'center',}}>

    <Text>1. What is Lorem Ipsum?</Text>
    <Text>
1. dummy 
2. text
3. Ipsum
4. Lorem

</Text>
{showValue? <Text style={{color: 'green', margin: 10,}}>Answer: Lorem</Text> : null}
<Button title="Show Answer" onClick={() => setShowValue(!showValue)} />

</View>

);}
export default Testing;

最佳答案

用 onPress 替换 onClick

react js中使用onClick

<Button title="Show Answer" onPress={() => setShowValue(!showValue)} />

关于javascript - 当我单击 native react 按钮时如何显示或切换文本?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/73565639/

相关文章:

javascript - 如何使用 jQuery 获取表中前两个 <tr> 的高度?

javascript - React Navigation v5 如何使用 typescript 在选项卡之间导航

ios - React Native 0.61 : With autolinking, 还需要在 Podfile 中添加行吗?

javascript - 使用纯 npm 构建在 NW.js (node-webkit) 应用程序中加载 Bootstrap

javascript - 将 html 标签插入到替换函数中

javascript - 为什么 Nuget Javascript 包会复制到 Scripts 文件夹

javascript - 条件渲染不显示 - ReactJS

javascript - Redux reducer promise 处理

reactjs - 如何在 React Native 中获取输入值?

android - 使用 react-native 在真实设备上获取红屏