Reactjs 如何通过react中的onPress事件从数组中删除项

我正在制作一个待办事项应用程序。我想在按钮按下事件中调用一个函数，并想将项目id传递给它

import React ,{useState} from 'react';
import { StyleSheet, Text, View, TextInput, Button, ScrollView, Alert, FlatList} from 'react-native';

export default function App() {
  const  [goal,setgoal] = useState('');
  const [addInput, setInput] = useState([]);

  const changetext= ()=>{    
    setInput(addInput=>[...addInput,{id: Math.random().toString(), value: goal}]);   

  };
  const texthandler= (enteredText)=>{
    setgoal(enteredText);
  };
  const deleteText = (e)=>{
    setInput((addInput)=>addInput.filter(todo=>todo.id !=e.target.id))   
                          }

  return (
    <View style={styles.screen} >
      <View style={styles.InputView}>
        <TextInput placeholder="Course Goal"  onChangeText={texthandler} value={goal}
        style={styles.TextInputStyle}/>
        <Button title='ADD' onPress={changetext}/>
      </View>     

     <FlatList data={addInput} keyExtractor={(item,index)=>item.id} renderItem={
                                  (itemData)=>(
                                  <View style={styles.recordList}>
                                  <Text style={styles.Textoutput} id={itemData.item.id} onPress={deleteText}>{itemData.item.value}</Text>
                                  <Button title="Delete" style={styles.DeleteButton}  value={itemData} onPress={deleteText} ></Button>
                                  </View>)}/> 
</View>


  );
}

这里我想要删除按钮从“addInput”列表中删除相应的元素。按文本字段本身也会发生同样的情况。 但在这里，我可以从文本字段传递id，但不能从按钮传递id。为什么会这样？ 如何使用按钮来完成它。 另外，我应该使用“this”关键字吗？我们可以不用它吗？因为在最初的阶段，有时我会觉得很困惑。

---

提前感谢

我不确定React native的答案，但在React中，我会尝试以下方法：-

const deleteText = e => setInput(
  addInput => addInput.split(addInput.findIndex(todo => todo.id == e.target.id), 1)
)   

onPress= { this.deleteText.bind(this,idx) }

---

如果不将此函数作为prop传递，只需删除bind并使用此函数调用它。在react/react native中，可以创建事件处理程序方法并处理数组项，例如：

handleOnPress=值=>{ 设{mArray}=this.state ifmArray.includeValue{ 让index=mArray.findIndexitem=>item==value 玛丽指数，1 }艾尔斯玛丽酒店 这个.setState{mArray} } 在您的情况下，只需从数组中删除项，就可以使用拼接方法。例如：

handleOnDelete=项目=>{ 设{mArray}=this.state； 让index=mArray.findIndexitem=>item==value ifindex>-1 mArray.com索引，1 else控制台。记录“未找到项” } 试试这个：

  const deleteText = (itemID)=>{
    setInput(()=>addInput.filter(todo=>todo.id !=itemID))   
 }

  return (
    <View style={{marginTop:30}}> 
      <View>
        <TextInput placeholder="Course Goal"  onChangeText={texthandler} value={goal}/>
        <Button title='ADD' onPress={changetext}/>
      </View>     

     <FlatList data={addInput} keyExtractor={(item,index)=>item.id} renderItem={
                                  (itemData)=>(
                                  <View>
                                  <Text id={itemData.item.id} onPress={()=>deleteText(itemData.item.id)} >{itemData.item.value}</Text>
                                  <Button title="Delete"  value={itemData} onPress={()=>deleteText(itemData.item.id)} ></Button>
                                  </View>)}/> 
</View>