css - 如何在 React Native 中使用三元运算符
问题描述
我是 React native 的新手,我在这个应用程序中创建了一个简单的 todo 应用程序,我添加了一个清除按钮,我的问题是,当我添加 todo 然后显示清除按钮,否则我不想要它。如果您有任何疑问,请随时提出任何问题。
这是我简单的添加待办事项代码,在这个应用程序中我使用了函数组件
import React from 'react'
import { StyleSheet, Text, View, TextInput, Button, Alert, ScrollView } from 'react-native';
import Header from './Components/Header';
import { AntDesign } from '@expo/vector-icons';
const App = () => {
const [text, setText] = React.useState("");
const [items, setItems] = React.useState([])
const [show, setShow] = React.useState(false);
// Add a todo
const addTodo = () => {
if (text == "") {
alert("Please Enter Todo");
}
else {
setItems([...items, text]);
setText('');
}
}
// Delete a todo
const deleteItem = (id) => {
const updatedItems = items.filter((elem, ind) => {
return ind != id;
})
setItems(updatedItems);
}
// Clear all todo
const clearAllItems = () => {
setItems([]);
}
return (
<ScrollView>
<View>
<Header />
<TextInput
style={styles.input}
value={text}
onChangeText={(e) => setText(e)}
/>
<Button title="Add +"
onPress={addTodo}
/>
<View style={styles.list}>
{items.map((elem, ind) => {
return (
<View key={ind} style={styles.listitem}>
<Text style={styles.item}>{elem}</Text>
<Text style={styles.icon} onPress={() => deleteItem(ind)}><AntDesign name="delete" size={24} color="black" /></Text>
</View>
)
})}
</View>
{
show ? items : <Button title="Clear" onPress={clearAllItems} />
}
</View>
</ScrollView>
)
}
export default App
const styles = StyleSheet.create({
list: {
marginTop: 20,
padding: 50,
},
item: {
display: 'flex',
flexDirection: 'column',
padding: 10,
marginTop: 10,
borderWidth: 1,
borderStyle: 'dashed',
borderColor: 'gray',
textAlign: 'center',
backgroundColor: '#5ed9db',
fontWeight: 'bold',
color: 'black',
fontSize: 20,
width: 280
},
input: {
height: 40,
margin: 12,
borderWidth: 1,
padding: 10,
},
listitem: {
flexDirection: 'row',
justifyContent: 'space-between'
},
icon: {
marginTop: 10,
borderWidth: 1,
borderColor: 'black',
backgroundColor: '#5edbb3',
width: 50,
fontSize: 20,
fontWeight: 'bold',
alignItems: 'center',
textAlign: 'center',
padding: 10
}
})
解决方案
试试这个:
const [text, setText] = React.useState("");
const [items, setItems] = React.useState([])
// Add a todo
const addTodo = () => {
if (text == "") {
alert("Please Enter Todo");
}
else {
setItems([...items, text]);
setText('');
}
}
// Delete a todo
const deleteItem = (id) => {
const updatedItems = items.filter((elem, ind) => {
return ind != id;
})
setItems(updatedItems);
}
// Clear all todo
const clearAllItems = () => {
setItems([]);
}
return (
<ScrollView>
<View>
<Header />
<TextInput
style={styles.input}
value={text}
onChangeText={(e) => setText(e)}
/>
<Button title="Add +"
onPress={addTodo}
/>
<View style={styles.list}>
{items.map((elem, ind) => {
return (
<View key={ind} style={styles.listitem}>
<Text style={styles.item}>{elem}</Text>
<Text style={styles.icon} onPress={() => deleteItem(ind)}><AntDesign name="delete" size={24} color="black" /></Text>
</View>
)
})}
</View>
{
items.length > 0 && <Button title="Clear" onPress={clearAllItems} />
}
</View>
</ScrollView>
)
}
我不相信你需要状态来展示,setShow。让我知道这是否有效。Ian Vasco 提到了 FlatList。您可能会考虑使用FlatList,因为我相信它已针对 React Native 进行了优化。
推荐阅读
- boto3 - Boto3 - sqs get_queue_url 导致 QueueDoesNotExist
- .net - 如何估计类实例的内存大小(仅来自代码检查)
- php - PHP/引导页面分页
- java - sun.jvmstat.monitor.* 在 Java 11 中不可访问
- javascript - 语义-ui-react 复选框的更改处理程序不起作用:React+Typescript
- firefox - 使用脚本在 Firefox 60 ESR 中设置默认应用程序处理程序
- azure - 如何在 Azure 数据资源管理器中为柱形图设置颜色
- c# - 使用BackgroundWorker时从datagrid WPF中一一处理项目
- excel - 使用来自 2 个单元格的日期范围和来自另一个单元格的名称更新数据透视表过滤器
- service - 授权新用户-keycloak