我正在构建这个 react-native 应用程序,它列出了正在进行的任务,还允许用户在需要时删除任务。我已经能够显示每个任务,但我不知道如何为每个添加的任务添加删除按钮。
下面是我想出的代码(还没有删除按钮)
export default function App() {
const [newTask,setNewTask] = useState();
const [taskList,setTaskList] = useState([]);
const convertedTaskList = taskList.map((toDoTask,index)=>({
id: index+1,
activity:toDoTask,
status:'complete'
}))
function addTodoHandler(){
setTaskList([...taskList,newTask])
}
return (
<View style={styleSheet.container}>
<View style={styleSheet.contentContainer}>
<View>
<Text style={styleSheet.sectionTitle}>TO-DO LIST</Text>
</View>
<View style={styleSheet.taskContainer}>
{taskList.map((task)=><Text key={task}>{task}</Text>)}
</View>
</View>
<View style={styleSheet.addTaskWrapper}>
<TextInput placeholder="Enter Task" onChangeText={(enteredText)=>setNewTask(enteredText)}/>
<Button title="Add Task" onPress={addTodoHandler}/>
</View>
</View>
);
}
我尝试在这行代码中添加一个删除按钮,但这似乎不起作用。有没有办法为用户添加的每个任务创建一个专用的删除按钮?
<View style={styleSheet.taskContainer}>
{taskList.map((task)=><Text key={task}>{task}</Text>)}
</View>