为用户添加的每个任务输入添加一个删除按钮

问题描述 投票:0回答:0

我正在构建这个 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>
arrays react-native button
© www.soinside.com 2019 - 2024. All rights reserved.